微信小程序之实现地图定位(使用腾讯位置服务插件)
2022/1/3 17:08:03
本文主要是介绍微信小程序之实现地图定位(使用腾讯位置服务插件),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 一. 腾讯位置服务插件简介
- 1. 完整的地图能力
- 2. 地图插件的优势
- 二. 开通腾讯位置服务
- 三、接入插件
- 四、 开发者密钥配置
- 五、插件的使用
一. 腾讯位置服务插件简介
1. 完整的地图能力
腾讯位置服务基于微信提供的小程序插件能力,专注于(围绕)地图功能,打造一系列小程序插件,可以帮助开发者简单、快速的构建小程序,是实现地图功能的最佳伙伴。
目前腾讯位置服务提供 路线规划、地图选点、地铁图 三款插件产品,本篇博客主要针对地图选点功能进行实现。
路线规划:提供地图路线规划功能。根据起终点,智能规划驾车、公交、步行出行路线及详情。开发者可以将路线规划插件嵌入到自建小程序的页面里,实现路线规划功能。
地铁图:支持全国重点城市地铁线路静态展示、信息查询、线路检索及规划功能。
地图选点:快速、准确地选择并确认自己的当前位置,并将相关位置信息回传给开发者。同时还提供位置检索、关键词分类等辅助功能。
2. 地图插件的优势
丰富的插件市场:丰富的地图插件产品,为开发者提供更多的选择,满足不同的应用场景。
节约开发成本:插件本身具有强大的灵活性,无需开发者投入专业的人力研发,就可以拥有地图能力,缩减企业研发成本。
专业的行业方案:腾讯位置服务专注于地图能力,多年服务政企、美团、京东、滴滴等大客户的经验,锻造了更加专业的产品并提供更优秀的行业解决方案。
二. 开通腾讯位置服务
1.进入微信公众平台
https://mp.weixin.qq.com/
2.登录进入小程序后台,选择 “开发 - 开发工具 - 腾讯位置服务”
3.点击 “开通”,进入授权扫码界面
4.使用微信扫码进行授权
5.绑定开发者账号
三、接入插件
1.在小程序后台,选择 “设置 - 第三方设置 - 插件管理”,点击 “添加插件”
2.搜索 “腾讯位置服务地图选点” 进行添加
四、 开发者密钥配置
- 申请开发者密钥
进入腾讯位置服务平台:
https://lbs.qq.com?lbs_invite=Y9PRFLY
注册或登录后,申请开发者密钥:
PS: 成功申请密钥后才可以调用腾讯位置服务官网提供的相关服务;
- 设置KEY的 “启用产品”
a. 勾选微信小程序,设置授权 APP ID
授权 APP ID 可以通过 “设置 - 基本设置” 的账号信息进行查看
b. 勾选 “WebService API”
小程序插件需要使用WebService API的部分服务,所以需要给使用该功能的KEY配置相应权限。
如果填写了域名白名单,需要把servicewechat.com 域名添加进域名白名单中,否则小程序下将无法正常使用WebServiceAPI服务。
五、插件的使用
1.引入插件
地图选点appId: wx76a9a06e5b4e693e
// app.json { "plugins": { "chooseLocation": { "version": "1.0.5", "provider": "wx76a9a06e5b4e693e" } } }
2.设置定位授权
地图选点插件需要小程序提供定位授权才能够正常使用定位功能
// app.json { "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" } } }
- 代码实现
a. js代码
"use strict"; const chooseLocation = requirePlugin('chooseLocation'); Page({ data: { address: "", locationName: "" }, onShow: function () { // 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象 // 如果点击确认选点按钮,则返回选点结果对象,否则返回null const location = chooseLocation.getLocation(); if(location){ this.setData({ address: location.address?location.address : "", locationName: location.name?location.name : "" }); } }, //显示地图 showMap() { //使用在腾讯位置服务申请的key(必填) const key = ""; //调用插件的app的名称(必填) const referer = ""; wx.navigateTo({ url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer }); } });
plugin://chooseLocation/index 接口参数说明:
b. wxml代码
<!--index.wxml--> <view class="container"> <button bindtap="showMap">选择位置</button> <view style="margin-top:10px">地址:{{address?address:"暂无"}}</view> <view style="margin-top:10px">名称:{{locationName?locationName:"暂无"}}</view> </view> ![请添加图片描述](https://www.www.zyiz.net/i/ll/?i=706537c4ea984083b79a3bd6d609e2ac.gif)
- 效果实现
这篇关于微信小程序之实现地图定位(使用腾讯位置服务插件)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-24微信小程序资料入门指南
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享