个人免费网站建站运营,wordpress仿36kr模板,wordpress好看主题,最好用的手机优化软件文章目录一. 腾讯位置服务插件简介1. 完整的地图能力2. 地图插件的优势二. 开通腾讯位置服务三、接入插件四、 开发者密钥配置五、插件的使用一. 腾讯位置服务插件简介
1. 完整的地图能力
腾讯位置服务基于微信提供的小程序插件能力#xff0c;专注于#xff08;围绕#… 文章目录一. 腾讯位置服务插件简介1. 完整的地图能力2. 地图插件的优势二. 开通腾讯位置服务三、接入插件四、 开发者密钥配置五、插件的使用一. 腾讯位置服务插件简介
1. 完整的地图能力
腾讯位置服务基于微信提供的小程序插件能力专注于围绕地图功能打造一系列小程序插件可以帮助开发者简单、快速的构建小程序是实现地图功能的最佳伙伴。
目前腾讯位置服务提供 路线规划、地图选点、地铁图 三款插件产品本篇博客主要针对地图选点功能进行实现。
路线规划提供地图路线规划功能。根据起终点智能规划驾车、公交、步行出行路线及详情。开发者可以将路线规划插件嵌入到自建小程序的页面里实现路线规划功能。
地铁图支持全国重点城市地铁线路静态展示、信息查询、线路检索及规划功能。
地图选点快速、准确地选择并确认自己的当前位置并将相关位置信息回传给开发者。同时还提供位置检索、关键词分类等辅助功能。
2. 地图插件的优势
丰富的插件市场丰富的地图插件产品为开发者提供更多的选择满足不同的应用场景。
节约开发成本插件本身具有强大的灵活性无需开发者投入专业的人力研发就可以拥有地图能力缩减企业研发成本。
专业的行业方案腾讯位置服务专注于地图能力多年服务政企、美团、京东、滴滴等大客户的经验锻造了更加专业的产品并提供更优秀的行业解决方案。
二. 开通腾讯位置服务
1.进入微信公众平台 https://mp.weixin.qq.com/
2.登录进入小程序后台选择 “开发 - 开发工具 - 腾讯位置服务” 3.点击 “开通”进入授权扫码界面 4.使用微信扫码进行授权 5.绑定开发者账号
三、接入插件
1.在小程序后台选择 “设置 - 第三方设置 - 插件管理”点击 “添加插件” 2.搜索 “腾讯位置服务地图选点” 进行添加
四、 开发者密钥配置
申请开发者密钥
进入腾讯位置服务平台
https://lbs.qq.com?lbs_inviteY9PRFLY
注册或登录后申请开发者密钥 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生命周期函数中能够调用插件接口取得选点结果对象// 如果点击确认选点按钮则返回选点结果对象否则返回nullconst 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 classcontainerbutton bindtapshowMap选择位置/buttonview stylemargin-top:10px地址{{address?address:暂无}}/viewview stylemargin-top:10px名称{{locationName?locationName:暂无}}/view
/view
效果实现
