技术选定(地图选点插件)
(对应官网:https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker )
去微信小程序中-设置
https://mp.weixin.qq.com/wxamp/basicprofile/thirdauth?token=1361472091&lang=zh_CN
直接搜索腾讯位置服务地图选点
插件即可
准备工作:登录微信公众平台后,添加的插件,如上图
** 如果使用uni-app开发的小程序,配置的位置 HBuilder工具中注意 **
如图:
实现代码【上面链接官方都有】
manifest.json
/* 小程序特有相关 */ "mp-weixin": { "appid": "wx6a968da933xxxxxx", "setting": { "urlCheck": false, "es6": true }, "usingComponents": true, "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" } }, "plugins": { "chooseLocation": { "version": "1.0.5", "provider": "wx76a9a06e5b4e693e" } } },
<template> <view> 您已选择:{{chooseLocation}} </view> </template> <script> export default { data() { return { chooseLocation: '中国', }; }, onLoad() { this.getAddress(); }, // 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象 onShow() { const chooseLocation = requirePlugin('chooseLocation'); const location = chooseLocation.getLocation(); // 如果点击确认选点按钮,则返回选点结果对象,否则返回null console.log("您所选择的位置:", location); if(location){ this.chooseLocation = location.address; } }, onUnload() { // 页面卸载时设置插件选点数据为null,防止再次进入页面,geLocation返回的是上次选点结果 chooseLocation.setLocation(null); }, methods: { getAddress() { const key = '4DABZ-MTZ2R-PZLW2-WX6FG-W5IXE-APFAF'; //使用在腾讯位置服务申请的key const referer = '那年绿荫下白裙的你'; //调用插件的app的名称 const location = JSON.stringify({ latitude: 39.89631551, longitude: 116.323459711 }); const category = '生活服务,娱乐休闲'; wx.navigateTo({ url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' + category }); }, } }; </script> <style lang="scss" scoped> </style>