前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序地图插件使用

微信小程序地图插件使用

原创
作者头像
用户1215037
修改2021-08-31 11:09:54
1.7K0
修改2021-08-31 11:09:54
举报
文章被收录于专栏:云生活应用云生活应用

1.申请腾讯位置服务账号,网址:腾讯位置服务 - 立足生态,连接未来 (qq.com)

2.创建应用,获取key和应用名称

3.小程序管理后台添加插件 

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

4.在app.json里添加插件代码

"plugins": { //选点插件 "chooseLocation": { "version": "1.0.6", "provider": "wx76a9a06e5b4e693e" }, // 路线规划插件 "routePlan": { "version": "1.0.12", "provider": "wx50b5593e81dd937a" } },

//设置定位授权 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" } }

5.页面调用插件

const app = getApp() const key = '********************'; //使用在腾讯位置服务申请的key const referer = '门店'; //调用插件的app的名称 const category = '公共厕所';//关键字查询 const chooseLocation = requirePlugin('chooseLocation'); Page({ onUnload () { // 页面卸载时设置插件选点数据为null,防止再次进入页面,geLocation返回的是上次选点结果 chooseLocation.setLocation(null); }, onLoad() { wx.navigateTo({ url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' + category }); }, onShow () { const location = chooseLocation.getLocation(); // 如果点击确认选点按钮,则返回选点结果对象,否则返回null if(location!=null){ let locationjson = JSON.stringify(location); wx.redirectTo({ url: '../route/route?local='+locationjson }); } } })

最终效果图:

想试试实际效果可以在微信中搜索小程序“卫生间在哪里”

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档