UniApp realizes the integration and usage skills of map positioning and navigation

UniApp is a cross-platform framework developed based on Vue.js. It can achieve the goal of developing multiple terminals at once, including H5, mini programs, apps, quick applications, etc. In the actual development process, we often encounter the need for map positioning and navigation functions. So how to integrate and use map positioning and navigation in UniApp? This article will use code examples to introduce in detail the integration and usage skills of map positioning and navigation in UniApp.

First, we need to configure the relevant permissions and the AppKey of Baidu Map SDK in the manifest.json file of UniApp. Open the manifest.json file, find the "permission" field under "mp-weixin", and add the following permissions:

{
  "name": "scope.userLocation",
  "desc": "地理位置",
},
{
  "name": "scope.record",
  "desc": "录音功能"
}

Add the "appid" field under "mp-weixin" and fill in the open on Baidu map The AppKey applied for by the platform is as follows:

{
  "name": "appid",
  "value": "your_appKey"
}

Next, we need to install the uni-app plug-in to implement map positioning and navigation functions. Open the terminal in the root directory of the project and run the following command to install the plug-in:

npm install @dcloudio/uni-plugin-baidu-map --save

After the installation is complete, we need to configure the use of the plug-in in the pages.json file of the project. Find a page under the "pages" field and add the following code:

{
  "path": "pages/map/map",
  "style": {
    "navigationBarTitleText": "地图"
  }
}

This completes the plug-in configuration.

Next, we can develop map positioning and navigation in the specified page. In the vue file of the corresponding page, add the following code:

<template>
  <view>
    <button @tap="getLocation">点击获取位置</button>
    <button @tap="startNavigation">点击开始导航</button>
    <button @tap="showNavigation">显示导航按钮</button>
    <view class="map"></view>
  </view>
</template>

<script>
  import { openLocation, getLocation, navigateTo, showNavigationBarLoading } from '@dcloudio/uni-api'

  export default {
    data() {
      return {
        latitude: '',
        longitude: '',
        markers: [],
      }
    },
    methods: {
      getLocation() {
        getLocation({
          success: (res) => {
            this.latitude = res.latitude
            this.longitude = res.longitude
            this.markers = [{
              id: 0,
              latitude: res.latitude,
              longitude: res.longitude,
              title: '当前位置',
            }]
          },
          fail: (err) => {
            console.log(err)
          },
        })
      },
      startNavigation() {
        showNavigationBarLoading()
        openLocation({
          latitude: this.latitude,
          longitude: this.longitude,
        })
      },
      showNavigation() {
        navigateTo({
          url: `plugin://uni-plugin-baidu-map/index?key=${your_appKey}`,
        })
      },
    },
  }
</script>

In the above code, we first introduced the map-related API methods, including openLocation, getLocation, navigationTo and showNavigationBarLoading. Methods for obtaining location, starting navigation and displaying navigation buttons are defined in vue's methods, and the corresponding API methods are called in the corresponding click events.

In the template, we render the marked points on the map by looping through the markers, and trigger the positioning and navigation functions in the click event.

So far, we have completed the integration and use of map positioning and navigation in UniApp. By simply configuring and calling API methods, we can implement map positioning and navigation functions. I hope this article is helpful to everyone, thank you for reading!

The above is the detailed content of UniApp realizes the integration and usage skills of map positioning and navigation. For more information, please follow other related articles on the PHP Chinese website!