How to use AutoNavi in ​​uniApp

With the development of mobile applications and positioning technology, maps have become an indispensable tool in our daily life and work. As one of the mainstream map service providers in China, Amap is favored by developers for its functions and data resources. So, how should we use Amap in uniApp?

1. Apply for Amap API Key

Before using Amap, we need to apply for an API Key on the Amap open platform. The steps are as follows:

1. Open the official website of AMAP Open Platform (https://lbs.amap.com/).

2. Register and log in to your developer account.

3. Create an application through the management console.

4. Find the "Basic Configuration" page in the application management page and apply for an API Key.

5. After the application is successful, you can see the generated Key value on the "Application Management" page for subsequent development.

2. Use Amap SDK

To use Amap in uniApp, we need to use Amap SDK. The uni-app platform provides a plug-in called uni-amap, which can easily use the Amap SDK in uni-app.

1. Install the uni-amap plug-in.

Open the uni-app project in HBuilderX, select "Plug-in Market" in the menu bar, enter "uni-amap" in the search box to search, select the plug-in and install it.

2. Introduce Gaode Map SDK.

Introduce Gaode Map SDK into the App.vue file, as follows:

<template>
  <uni-amap id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers"></uni-amap>
</template>

<script>
import '@dcloudio/uni-amap'
export default {
  data() {
    return {
      longitude: 116.397390,
      latitude: 39.908860,
      markers: [{
        id: 0,
        longitude: 116.397390,
        latitude: 39.908860,
        title: '东方明珠',
        iconPath: '../../static/marker.png',
        width: 32,
        height: 32,
        zIndex: 999
      }]
    }
  }
}
</script>

In this code, we define a uni-amap label. With the given longitude, latitude and markers parameters, you can Display the map information we need on the map.

3. Amap application scenarios

1. Positioning and navigation

Through the Amap SDK, we can obtain the user’s location information and target different application scenarios Navigate. In uni-app, we can obtain the user's location information through the uni.getLocation() method. The code is as follows:

uni.getLocation({
  type: 'gcj02',
  success: function (res) {
    console.log('location', res)
  }
})

2. Map POI search

Through Amap SDK, we can realize keyword search for surrounding POIs (points of interest). In uni-app, we can obtain surrounding POI information through the uni.amap.getPoiAround() method. The code is as follows:

uni.amap.getPoiAround({
  iconPath: '../../static/marker.png',
  longitude: 116.397390,
  latitude: 39.908860,
  success: function (res) {
    console.log('search result:', res)
  }
})

4. Track recording

Using Amap SDK, we can visualize the positioned trajectory. In uni-app, we can use the uni.amap.showPolyline() method to display the trajectory on the map. The code is as follows:

var points = [
  {'longitude': 116.397390, 'latitude': 39.908860},
  {'longitude': 116.407390, 'latitude': 39.918860},
  {'longitude': 116.417390, 'latitude': 39.928860},
  {'longitude': 116.427390, 'latitude': 39.938860}
]
uni.amap.showPolyline({
  arrowLine: true,
  points: points,
  color: '#FF00FF',
  width: 10,
  zIndex: 99
})

The above is the basic method of using Amap in uni-app. Of course, Amap SDK has more functions and APIs, which we can call according to our own needs.

The above is the detailed content of How to use AutoNavi in ​​uniApp. For more information, please follow other related articles on the PHP Chinese website!