H5唤起地图APP

H5通过Scheme唤起高德地图、百度地图APP，路线规划

代码如下：

HTML代码

<p class="f-tac">
  <a id="gaode"> 高德路线规划 </a>
</p>
<p class="f-tac">
  <a id="baidu"> 百度路线规划 </a>
</p>  
<p class="f-tac">
  (提示：不支持在微信中打开路线规划)
</p>

JS代码

// request({
//   type: 'get',
//   url: `https://restapi.amap.com/v3/geocode/geo?key=上面申请的key&address=地点&output=JSON`,
// }).then(data => {
//   if (data.status === '1' && data.geocodes[0] && data.geocodes[0].location) {
//     console.log('经纬度', data.geocodes[0].location)
//     const position = data.geocodes[0].location // 上面拿到的经纬度
//     const latitude = position.split(',')[1]
//     const longitude = position.split(',')[0]
//     const from = {}  // 出发地，不传则默认当前位置
//     const to = { name: address, longitude, latitude }; // address：目的地
//     const gaodeUrl = getMapScheme(from, to, "gaode")
//     const baiduUrl = getMapScheme(from, to, "baidu")
//   } else {
//     console.log('无法获取位置信息，请确认填写的地点是否有误')
//   }
// });

// 获取地图scheme， 经纬度坐标类型要求为gcj02不然位置会有偏差from 从哪里
const getMapScheme = (_from: any, to: any, mapType = "gaode") => {
  const u = navigator.userAgent;
  const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端

  const andriodBaidu = (to: any) => {
    return `bdapp://map/direction?destination=name:${to.name}|latlng:${to.latitude},${to.longitude}&coord_type=gcj02&mode=driving&src=andr.jianghu.jianhao`;
  };

  const iOSBaidu = (to: any) => {
    return `baidumap://map/direction?destination=name:${to.name}|latlng:${to.latitude},${to.longitude}&coord_type=gcj02&mode=driving&src=ios.jianghu.jianhao`;
  };

  const andriodGaode = (to: any) => {
    return `amapuri://route/plan/?sourceApplication=mhc&dlat=${to.latitude}&dlon=${to.longitude}&dname=${to.name}&dev=0&t=0`;
  };

  const iOSGaode = (to: any) => {
    return `iosamap://path?sourceApplication=mhc&dlat=${to.latitude}&dlon=${to.longitude}&dname=${to.name}&dev=0&t=0`;
  };

  if (mapType == "baidu") {
    if (isAndroid) {
      return andriodBaidu(to);
    } else {
      return iOSBaidu(to);
    }
  } else if (mapType == "gaode") {
    if (isAndroid) {
      return andriodGaode(to);
    } else {
      return iOSGaode(to);
    }
  }
};

const from = {}; // 出发地，不传则默认当前位置
const to = { name: "武汉长江大桥", longitude: 114.29, latitude: 30.55 }; // address：目的地

document
  .querySelector("#gaode")
  ?.setAttribute("href", getMapScheme(from, to, "gaode") as string);
document
  .querySelector("#baidu")
  ?.setAttribute("href", getMapScheme(from, to, "baidu") as string);