【微信小程序】腾讯位置服务地图选点服务示例

最新推荐文章于 2024-11-13 21:59:37 发布

Chx.zhang

最新推荐文章于 2024-11-13 21:59:37 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： # 微信小程序文章标签：微信小程序小程序前端地图选点

本文链接：https://blog.csdn.net/qq_38987146/article/details/126502600

微信小程序专栏收录该内容

10 篇文章

订阅专栏

本文指导如何在微信小程序中添加腾讯位置服务地图选点插件，包括申请、配置、引入及使用步骤，展示了关键代码片段和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件添加

1、插件申请接入：
在腾讯公众平台中， “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”，搜索 “腾讯位置服务地图选点” 申请添加，通过则可在小程序内使用该插件。

2、引入插件包：
地图选点appId： wx76a9a06e5b4e693e

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

小程序腾讯位置key获取：

登录腾讯位置服务控制台，添加应用
为创建的应用添加key，
生成key

小程序使用

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);
    },

})