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

插件添加

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

})

效果:
在这里插入图片描述

<think>好的,我现在需要帮助用户解决在UniApp中集成腾讯地图实现选点功能的问题。用户提到了教程或示例代码,所以我要先回忆之前提供的引用内容,看看有哪些相关信息可以整合。 首先,引用[1]和[3]提到了在H5中使用腾讯地图的配置步骤,包括申请密钥和配置manifest.json。引用[4]则具体说明了如何在微信小程序中加入地图选点插件,需要在manifest里添加插件代码和权限声明。虽然用户的问题可能主要针对小程序,但可能需要区分不同平台的处理方式。 接下来,用户需要的是选点功能的示例代码。根据引用[2]和[4],微信小程序选点功能可以通过调用插件API,比如wx.chooseLocation。而对于H5,可能需要使用JavaScript API,但需要处理跨域等问题,不过用户可能更关注小程序端的实现,因为选点功能在小程序中更常见。 需要确保步骤清晰,首先配置插件和权限,然后编写触发选点的方法,处理返回的位置数据,并在地图上显示标记。同时,要提醒用户替换自己的腾讯地图密钥,并注意不同平台的差异,比如H5可能需要不同的配置,但主要示例可能以小程序为主,因为引用中更多涉及小程序的部分。 另外,要检查是否有必要提到地图组件的使用,比如map组件的属性设置,以及markers的配置,这样用户选点后可以在地图上显示标记。同时,需要确保代码示例正确,比如在methods中定义chooseLocation方法,并在页面中放置按钮和map组件。 最后,考虑到用户可能需要常见问题的解答,比如密钥配置错误、插件无法使用、权限问题等,这些都需要在注意事项中提及。另外,跨平台兼容性也是需要注意的点,可能需要用户根据平台进行条件编译或不同的处理。</think>以下是在 UniApp 中集成腾讯地图选点功能的详细实现步骤和示例代码: ### 一、配置腾讯地图服务 1. **申请腾讯位置服务密钥** - 访问[腾讯位置服务控制台](https://lbs.qq.com/dev/console/application/mine)[^3] - 创建应用并获取`WebService Key`(H5端)和`小程序Key`(微信平台) 2. **manifest.json 配置** ```json // 微信小程序配置 "mp-weixin": { "plugins": { "chooseLocation": { "version": "1.0.9", "provider": "wx76a9a06e5b4e693e" } }, "permission": { "scope.userLocation": { "desc": "需要获取您的位置信息用于位置选择" } } } ``` ### 二、选点功能核心代码 ```vue <template> <view> <button @click="chooseLocation">选择位置</button> <map id="myMap" :latitude="latitude" :longitude="longitude" :markers="markers" style="width: 100%; height: 400rpx;"> </map> </view> </template> <script> export default { data() { return { latitude: 39.90469, // 默认北京坐标 longitude: 116.40717, markers: [] } }, methods: { async chooseLocation() { // 微信小程序选点 const location = await uni.chooseLocation({ mapId: &#39;myMap&#39;, // 关联map组件 keyword: &#39;地标名称&#39; // 可选搜索关键词 }); if (location) { this.latitude = location.latitude this.longitude = location.longitude this.markers = [{ id: 1, latitude: location.latitude, longitude: location.longitude, iconPath: &#39;/static/marker.png&#39;, width: 30, height: 30 }] } } } } </script> ``` ### 三、跨平台兼容方案 1. **条件编译处理** ```javascript // #ifdef H5 // H5端使用JavaScript API import TMap from &#39;./utils/qqmap-wx-jssdk.min.js&#39; const qqmapsdk = new TMap({ key: &#39;您的WEB_KEY&#39; }); // #endif // #ifdef MP-WEIXIN // 小程序直接使用插件API // #endif ``` ### 四、注意事项 1. **密钥配置验证** - 确保各平台密钥与申请的应用类型匹配 - 域名白名单需包含项目部署域名[^1] 2. **常见问题处理** - 定位失败:检查用户是否授权地理位置权限 - 地图不显示:确认map组件宽高设置有效 - 插件加载失败:检查manifest.json版本号是否为最新[^4] 3. **扩展功能建议** - 地址逆解析:通过`qqmapsdk.reverseGeocoder()` - 周边搜索:使用`qqmapsdk.search()` - 路线规划:调用`qqmapsdk.direction()`
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值