uniapp调用腾讯位置服务地图选点插件

最新推荐文章于 2025-03-11 15:33:35 发布

para526

最新推荐文章于 2025-03-11 15:33:35 发布

阅读量4.2k

点赞数 6

分类专栏：笔记文章标签：微信小程序前端

本文链接：https://blog.csdn.net/weixin_56071445/article/details/124228301

版权

笔记专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在uniapp中集成微信小程序插件，特别是腾讯位置服务的地图选点功能。首先，详细阐述了在腾讯位置服务官网上申请key和创建应用的步骤，接着展示了在uniapp项目中配置manifest.json以引入地图选点插件的代码，并提供了获取和使用当前位置信息的方法。最后，给出了调用地图选点插件并展示选点界面的示例代码，以及如何获取选点后的位置信息。

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

一、申请腾讯位置服务的key

1、进入腾讯位置服务官网：腾讯位置服务 - 立足生态，连接未来

2、进入腾讯位置服务的控制台，进入应用管理

3、点击创建应用，输入应用名称和选择应用类型即可。

4、在创建成功的应用中点击添加key，勾选WebServiceAPI，勾选微信小程序并填入自己的微信小程序开发id

5、打开微信小程序插件，选择合适的插件类型，下面以地图选点插件作为例子。

6、在uniapp项目中加入以下代码引入插件

（1）打开manifest.json文件=》源码视图，在"mp-weixin"中加入插件包代码(代码以官方开发文档为准，不同版本可能有差异)

 "plugins": {
                "chooseLocation": {
                "version": "1.0.9",
                "provider": "wx76a9a06e5b4e693e"
                }
        },
"permission": {
               "scope.userLocation": {
               "desc": "你的位置信息将用于小程序定位"
               }
        },

7、引入插件页面调用示例：

const key = ''; //使用在腾讯位置服务申请的key
const referer = ''; //调用插件的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
});

8、因为我想打开地图即显示当前位置，做了如下改动：

<template>
	<view>
		<button type="primary" @click="goto()">地图选点</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        // 经度
      latitude:0,
      // 纬度
      longitude:0
			}
		},
    created() {
      // 获取当前的位置信息
      uni.getLocation({
        type:'wgs84',
        success: (res) => {
          console.log(res)
          this.latitude = res.latitude
          this.longitude = res.longitude
        }
      })
    },
		methods: {
      goto() {
        console.log(this.latitude)
        console.log(this.longitude)
        const key = 'NJLBZ-PZFLJ-WH3FK-FOIX7-4FB6V-BIFL2'; //使用在腾讯位置服务申请的key
        const referer = 'aaa'; //调用插件的app的名称
        const location = JSON.stringify({
          latitude: this.latitude,
          longitude: this.longitude
        });
        const category = '生活服务,娱乐休闲';
         
        wx.navigateTo({
          url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
        });
      }
		},
	}
</script>

<style>
button{
  width: 50%;
  margin: 0 auto;
}
</style>

运行结果：

（1）首页：