微信小程序地图插件使用

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

最终效果图：

 

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

 

 更多腾讯接口开发可以关注本人微信公众号查看