微信小程序导航-路线规划

一.微信公众平台增加插件和开通对应位置接口

1.登录后点击——账号设置

2.点击——第三方设置

3.插件管理点击添加插件——搜索腾讯位置服务路线规划后添加

4.开发管理-接口设置-地理位置的对应接口开通（如不清楚小程序具体需求可全开通即可）

 

二.腾讯位置服务网站配置

1.进入腾讯位置服务网站注册登录——官网地址：https://lbs.qq.com

2.登录后点击控制台-应用管理-我的应用，进入页面后点击创建应用，创建对应应用

3.创建key，创建应用后点击添加key，启用产品中选webServiceApi和小程序，小程序填写对应的appid，白名单格式为下

lbs.qq.com
servicewechat.com
你小程序请求的ip/域名

4.配额管理-key额度页面，配置你的key每天合适的额度，注意一下总额度，超出了就只能付费

 

三.app.json/pages.json小程序的配置

原生在app.json中增加，uniapp项目在pages.json中增加，新增的配置是permission和plugins。

{
    "permission": {
	      "scope.userLocation": {
		      "desc": "您的位置信息将用于小程序定位"
	      }
      },
      "plugins": {
	      "route-plan": {
		      "version": "2.2.0",
		      "provider": "wx50b5593e81dd937a"
	      }
      },
      pages:{
　　    你的页面路由
      }
}

　　

四.小程序路线规划/导航

const guide = () => {
    // 腾讯位置服务key
    const key = '你在腾讯位置服务创建的key';
    // 你的小程序名称
    const referer = '你的小程序名称';
    // 用户openId
    const openId = '随便写一个随机值就行也可不传';
    // 是否启用智能规划
    const enableAI = true;
    // 是否开启导航功能
    const navigation = 1;
    // 起点
    const startPoint = JSON.stringify({
      name: 起点名,
      latitude: 起点的lat,
      longitude: 起点的lon,
    });
    // 终点
    const endPoint = JSON.stringify({
      name: 终点的name,
      latitude: 终点的lat,
      longitude: 终点的lon,
    });
    // 个性化图层
    const layerStyle = 1;
    // 导航
    wx.navigateTo({
      url: `plugin://route-plan/index?key=${key}&referer=${referer}&openId=${openId}&startPoint=${startPoint}&endPoint=${endPoint}&enableAI=${enableAI}&navigation=${navigation}&layerStyle=${layerStyle}`
    })
}

　　

起点位置如果是我的位置的话可以这样写
const getMyLocation  = async ()=>{
	try{
		let res = await wx.getLocation({
			type: 'gcj02', // 坐标类型，wgs84为GPS坐标，gcj02为国测局坐标
		});
		if(res.errMsg == 'getLocation:ok'){
			你的起点经度 = res.longitude // 经度
			你的起点纬度= res.latitude // 纬度
		}
	}catch(err){
		console.log(err)
	}
}

注意：从微信小程序跳转到APP导航时起点会变成我的位置，即起点如果不是我的位置的话会丢失，目前微信小程序的导航无法解决这个问题。这个是因为微信小程序提供的api限制了只能传入目的地，不能传入起点导致的，可以参考文档： https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.openMapApp.html。