微信小程序地图插件使用

2021-08-31 11:09:54 浏览数 (1)

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 }); } } })

最终效果图:

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

0 人点赞