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 删除。