WeChat applet uses Gaode map to obtain current location

1. Register a key on the official website of Tencent Maps (creating an application will automatically generate a key, the detailed steps are shown in the figure)

Tencent Location Service - Based on Ecology, Connecting to the Future

Points to note: Open webserviceAPI service: Console -> Application Management ->  My Application  -> Add Key -> Check WebServiceAPI -> Save

(The applet SDK needs to use some services of webserviceAPI, so the KEY to use this function needs to have corresponding permissions)

 2. Download WeChat Mini Program JavaScriptSDK, WeChat Mini Program JavaScriptSDK v1.1    JavaScriptSDK v1.2

WeChat Mini Program JavaScript SDK | Tencent Location Service

After the download is complete, put it under the current applet utils, as shown in the figure: 

 

  3. Security domain name setting: Set the request legal domain name in the applet management background -> development -> development management -> development settings -> server domain name, add https://apis.map.qq.com (details as shown in the figure )

Applets

 

 4. Add the Tencent map plug-in in the applet management background -> settings (as shown in the figure)

5. Mini program configuration:

wxml:  

<map id="myMap" class="maMap" longitude="{
   
   {longitude}}" latitude="{
   
   {latitude}}" subkey="YOJBZ-GSH3H-FNSD6-WFK4Q-VCDR6-STF47" show-location ></map> 

 wxss:

page {
  height: 100%;
  width: 100%;
}
.maMap{
  height: 100%;
  width: 100%;
}

js：

// 引入SDK核心类

var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');

var qqmapsdk

onLoad: function () {

    wx.getLocation({

      type:'wgs84',

      success:res=>{

          this.setData({

            longitude: res.longitude,

            latitude: res.latitude

          })

      }

    })



    // 实例化API核心类

    qqmapsdk = new QQMapWX({

    key: '腾讯获取到的key'

    });

    this.mapCtx = wx.createMapContext('myMap')

},

app.json

"permission": {
    "scope.userFuzzyLocation": {
      "desc": "你的位置信息将用于小程序定位"
    }
}

6. After configuring the above operations, you can access, the result picture:

 ==================================================== ========================== Summary:

Problem one encountered:

The map is not displayed in the development tool, you can set the version number below 2.11 in Details->Local Settings->Debug Basic Library

Encountered problem two:

The map is displayed, but the current location cannot be located, because the latitude and longitude obtained in js is not taken out in wxml.