uni-app/微信小程序接入腾讯位置服务地图选点插件

uni-app/微信小程序接入腾讯位置服务地图选点插件

0、常出现的错误及解决方法

0.1插件未授权使用(见步骤1)

0.2小程序类目不符合引用该类目插件的要求或主体类型不符合要求(见步骤1)

0.3需要在app.json中声明permission scope.userLocation 字段(见步骤3)

1、授权插件使用

腾讯位置服务的文档对该插件的接入指引中提到:

在腾讯微信公众平台中, "微信小程序官方后台-设置-第三方服务-插件管理 " 里点击 "添加插件",搜索 "腾讯位置服务地图选点" 申请,申请后小程序开发者可在小程序内使用该插件。

但实际操作过程中,在添加插件的搜索页中,直接搜索腾讯位置服务地图选点,并不能找到的对应的插件。

通过文档查看可以知道,该插件适用的类目为交通服务 > 导航地图

这时就算在腾讯位置服务的网页中添加该插件,会提示

添加失败,小程序类目不符合引用该类目插件的要求或主体类型不符合要求

在小程序后台首页点击添加类目时又发现,交通服务下没有导航地图的类目。

这时可以访问微信服务市场,搜索腾讯位置服务地图选点 插件,选择接口与插件,就能找到对应的插件,或直接点击这里,登录相同的账号点击添加即可完成授权

添加插件完成后,在微信小程序官方后台-设置-第三方服务-插件管理 中即可看到对应的插件

点击详情,可以查看该插件的相关信息及接入文档

2、地图key生成

腾讯位置服务地图选点插件接入文档中提到需要一个地图key,首先登录腾讯位置服务控制台,点击左侧应用管理,创建应用,再添加key。

创建完key之后,要记得对key 做配额管理,不然在应用中,会提示该接口日访问量已用完

特别是周边推荐的接口额度

3、代码接入

在manifest.json中,微信小程序配置中填写appid 勾选位置接口(若不勾选 最后会提示需要在app.json中声明permission scope.userLocation 字段

在page.json中插入组件

javascript 复制代码
"plugins": {
	"chooseLocation": {
		"version": "1.1.1",
	    "provider": "wx76a9a06e5b4e693e"
	}
}

template

javascript 复制代码
<template>
	<view>
		<button @click="open">打开地图选点</button>
		<view v-if="info">
			<text>地址:{{info.address}}</text>
			<text>坐标:{{info.latitude}}, {{info.longitude}}</text>
		</view>
	</view>
</template>

js

javascript 复制代码
const chooseLocation = requirePlugin('chooseLocation');
export default {
	data() {
		return {
			info: null
		}
	},
	onShow() {
		// 如果点击确认选点按钮,则返回选点结果对象,否则返回null
		const location = chooseLocation.getLocation(); 
		this.info = location
	},
	open() {
		const key = '11111'; //使用在腾讯位置服务申请的key
		const referer = '1'; //调用插件的app的名称
		const location = JSON.stringify({
			latitude: 39.89631551,
			longitude: 116.323459711,
		});
		const category = '生活服务,娱乐休闲';
		//其他需要的参数,可以查看文档
		uni.navigateTo({
			url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`,
		});
		
	}
}
相关推荐
এ慕ོ冬℘゜2 小时前
前端实战:jQuery实现动态表格渲染与状态切换功能
前端·javascript·jquery
jay神2 小时前
【计算机毕业设计】基于Flask+Vue的电影数据可视化与智能推荐系统
前端·vue.js·python·信息可视化·flask·毕业设计·课程设计
FreeTinker9 小时前
HTML本地存储技术解析:localStorage与sessionStorage的原理、差异与应用场景
前端·html
qq_452396239 小时前
第十二篇:《全链路监控与可观测性:前端错误追踪与性能分析》
前端
wangruofeng9 小时前
Phosphor Icons 官网源码拆解:URL 即存储、水波动画与 7362 Star 图标库的架构实践
前端·架构·github
BigTopOne10 小时前
WebRTC Native / Android 开发学习资源整理
前端
excel11 小时前
nuxt 3 升级 nuxt 4 报错之 hasInjectionContext
前端
何以解忧,唯有..11 小时前
LangChain 工具调用(Tool Calling)实战指南
java·前端·langchain
软件聚导航12 小时前
「聚小软 AI 助手」技术升级:从数据库检索到 RAG 知识库问答
前端·数据库·mysql·微信小程序·小程序·ai编程·rag
恋猫de小郭12 小时前
看懂大模型架构术语,帮助你理解目前常见的大模型开源架构
前端·人工智能·ai编程