当前位置: 首页 > news >正文

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

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

  • 0、常出现的错误及解决方法
    • 0.1插件未授权使用(见步骤1)
    • 0.2小程序类目不符合引用该类目插件的要求或主体类型不符合要求(见步骤1)
    • 0.3需要在app.json中声明permission scope.userLocation 字段(见步骤3)
  • 1、授权插件使用
  • 2、地图key生成
  • 3、代码接入
      • template
      • js

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中插入组件

"plugins": {"chooseLocation": {"version": "1.1.1","provider": "wx76a9a06e5b4e693e"}
}

template

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

js

const chooseLocation = requirePlugin('chooseLocation');
export default {data() {return {info: null}}onShow() {// 如果点击确认选点按钮,则返回选点结果对象,否则返回nullconst location = chooseLocation.getLocation(); this.info = location},open() {const key = '11111'; //使用在腾讯位置服务申请的keyconst 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}`,});}
}

相关文章:

  • STM32F407实现SD卡的读写功能
  • #[特殊字符]Rhino建模教程 · 第一章:正方体建模入门
  • docker 启用portainer,容器管理软件
  • Flowable工程化改造相关文档
  • AI大模型如何重塑科研范式:从“假说驱动”到“数据涌现”
  • 11【模块学习】DS18B20(一):使用学习
  • 免费的内网穿刺工具和免费域名
  • **Windows 系统**的常用快捷键大全
  • C语言实战:用Pygame打造高难度水果消消乐游戏
  • Linux路漫漫
  • 千树万树梨花开
  • 【18】Strongswan encoding详解 message2
  • 面试题:请描述一下你在项目中是如何进行性能优化的?针对哪些方面进行了优化,采取了哪些具体的措施?
  • 【JavaScript】二十一、日期对象
  • 数据结构*集合框架顺序表-ArrayList
  • 网络的起点:深入解析计算机网络中的网络接口层
  • 在JavaScript中实现文件下载完成后自动打开
  • Python multiprocessing模块介绍
  • ns-3中UDP饱和流发包时间间隔设置最合理值
  • Redis + Caffeine打造超速两级缓存架构
  • 伊朗外长: 美伊谈判进展良好,讨论了很多技术细节
  • 玉渊谭天丨“稀土管制让美国慌了”,美军工稀土储备仅够数月
  • 一季度煤价持续下探,多家煤炭巨头营收下滑、净利润降约两成
  • 四川省人大常委会原党组成员、副主任宋朝华接受审查调查
  • 商务部:汽车流通消费改革试点正在加快推进
  • 猿辅导回应一员工离世:发生意外期间其所在团队没有安排加班