1.引入插件
在微信公众平台中找到设置,添加腾讯位置服务路线规划插件
2.引入插件包&授权
1.在项目中找到manifest.json,找到小程序相关配置(mp-weixin)直接复制进去。
"plugins": {
"routePlan": {
"version": "1.0.18",
"provider": "wx50b5593e81dd937a"
}
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位"
}
}
3.申请key
进去腾讯服务位置我的应用里,创建应用,申请key。
申请完成后会生成key
4.实现
因为用到的地方比较多,所以直接封装了一个方法,新建公共方法文件publicUtil.js
/**
*
* @param {*} name 地点名称
* @param {*} latitude 纬度
* @param {*} longitude 经度
*/
function openMap(name, latitude, longitude) {
let plugin = requirePlugin('routePlan');
let key = '*****-*****-*****-*****-*****-*****'; //使用在腾讯位置服务申请的key
let referer = '测试'; //调用插件的app的名称
let endPoint = JSON.stringify({ //终点
'name': name,
'latitude': Number(latitude),
'longitude': Number(longitude)
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&navigation=' + 1
});
}
export default {
openMap
}
找到main.js,实现全局引入
import util from "./components/publicUtil.js";
Vue.prototype.$util = util;
然后就可以使用$util.openMap()就可以调用了,记得传入对应的参数。
参考目录
https://lbs.qq.com/miniProgram/plugin/pluginGuide/routePlan