[WeChat applet] Tencent location service map point selection service example

add-on

1. Plug-in application access:
In the Tencent public platform, click "Add Plug-in" in "WeChat Mini Program Official Background-Settings-Third-Party Services-Plug-in Management", search for "Tencent Location Service Map Selection" to apply for adding, if passed The plug-in can be used within the applet.

2. Import plug-in package:
map point selection appId: wx76a9a06e5b4e693e

// app.json
{
    
    
	// 引入插件包:
  "plugins": {
    
    
    "chooseLocation": {
    
    
      "version": "1.0.9",
      "provider": "wx76a9a06e5b4e693e"
    }
  },
  // 提供定位授权
   "permission": {
    
    
    "scope.userLocation": {
    
    
      "desc": "你的位置信息将用于小程序定位"
    }
  }
}

Mini program Tencent location key acquisition:

  • Log in to the Tencent location service console and add an application
    insert image description here
  • Add a key to the created application,
    insert image description here
  • generate key
    insert image description here

Applet use

const chooseLocation = requirePlugin('chooseLocation');

Page({
    
    
	 /**
     * 页面的初始数据
     */
    data: {
    
    
        latitude: '',
        longitude: '',
        address:'',
    },
     /**
     * 生命周期函数--监听页面显示
     */
    onShow: function (options) {
    
    
           const location = chooseLocation.getLocation(); // 如果选点后 点击确认选点按钮,则返回选点结果对象,否则返回null
        if(location != null){
    
    
            console.log('onshow',location)
            this.setData({
    
    
                address: location.name,
                latitude: location.latitude,
                longitude: location.longitude
            })
        }
    },
    // 按地图选取地址
    getMapAddr:function(){
    
    
        const that = this;
        // 使用腾讯地图插件
        const key = '********************************************'; //使用在腾讯位置服务申请的key
        const referer = 'XXXXX'; //调用插件的app的名称
        const location = JSON.stringify({
    
    
           latitude: 39.89631551,
           longitude: 116.323459711
        });
        const category = '生活服务,娱乐休闲';
        wx.navigateTo({
    
    
            url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
        });
     
    },
	/**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
    
    
        chooseLocation.setLocation(null);
    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
    
    
        // 页面卸载时设置插件选点数据为null,防止再次进入页面,geLocation返回的是上次选点结果
        chooseLocation.setLocation(null);
    },

})

Effect:
insert image description here

Guess you like

Origin blog.csdn.net/qq_38987146/article/details/126502600