906 字
5 分钟
uniapp跳转第三方地图app
2024-07-07

需要实现的功能#

需要实现检查手机已安装的地图软件(高德地图、百度地图、腾讯地图),唤起列表选择(手机只有一款地图app直接跳转不选择,任何一款都没有跳转到网页高德地图),最后在用户点击之后跳转第三方地图软件并执行导航功能,好在各大地图app都提供了类似的接口,所以能够实现目标。

代码示例#

const useGetMapsApp = (locationType= 'gcj02') => {
  // 获取平台
  const platform = uni.getSystemInfoSync().platform;
  // 三大地图APP对应的平台包名及action
  const mapsJson = {
    aMap: {
      pname: 'com.autonavi.minimap',
      action: platform === 'ios' ? 'iosamap://' : 'amapuri://',
      name: '高德地图'
    },
    baiduMap: {
      pname: 'com.baidu.BaiduMap',
      action: 'baidumap://',
      name: '百度地图'
    },
    tencentMap: {
      pname: 'com.tencent.map',
      action: 'qqmap://',
      name: '腾讯地图'
    }
  };
  // 配置列表信息
  let mapList = [];
 
    // 获取平台对应的包名/action
    const appKeys = Object.keys(mapsJson);
    appKeys.forEach((key) => {
      const app = mapsJson[key];
      let obj = {
        pname: app.pname,
        action: app.action
      };
      if (plus.runtime.isApplicationExist(obj)) {
        mapList.push({
          key,
          name: app.name,
          ...obj
        });
      }
    });
    // ios端添加系统默认地图,所以在ios端地图列表至少有一个
    if (platform === 'ios') {
      mapList.push({
        name: '系统地图',
        pname: 'system'
      });
    }
  // 打开map软件列表,或者直接去导航
  const openMap = (option) => {
    // 如果存在以上地图APP软件
    if (mapList.length) {
      // 只有一个地图软件,直接打开
      if (mapList.length === 1) {
        openApp(1, option);
        return;
      }
      // 多个软件调起系统弹框,用户选择
      plus.nativeUI.actionSheet(
        {
          cancel: '取消',
          buttons: mapList.map((item) => ({
            title: item.name
          }))
        },
        function (e) {
          if (e.index > -1) {
            openApp(e.index, option);
          }
        }
      );
    } else {
      openGDWeb(option);
    }
  };
  // 打开高德地图官网
  const openGDWeb = (option) => {
    // 没有第三方地图APP就跳转网页版高德地图导航
    // https://uri.amap.com/navigation?from=116.478346,39.997361,startpoint&to=116.3246,39.966577,endpoint&via=116.402796,39.936915,midwaypoint&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0
    plus.runtime.openURL(
      encodeURI(
        'https://uri.amap.com/navigation?from=' +
          option.startLocation[1] +
          ',' +
          option.startLocation[0] +
          ',' +
          option.startAddress +
          '&to=' +
          option.endLocation[1] +
          ',' +
          option.endLocation[0] +
          ',' +
          option.endAddress +
          '&mode=car&policy=1&src=mypage&coordinate=' +
          (locationType === 'gcj02' ? 'gaode' : locationType) +
          '&callnative=0'
      )
    );
  };
  // 打开指定的APP地图软件
  const openApp = (index, option) => {
    const appInfo = mapList[index - 1];
    // ios端有系统地图,添加系统地图打开方式
    if (appInfo.pname === 'system') {
      const point1 = new plus.maps.Point(
        option.startLocation[0],
        option.startLocation[1]
      );
      const point2 = new plus.maps.Point(
        option.endLocation[0],
        option.endLocation[1]
      );
      plus.maps.openSysMap(point1, '', point2);
      return;
    }
    // 其他地图
    let action = '';
    // 高德
    if (appInfo.key === 'aMap') {
      action = aMapPath(appInfo, option);
    }
    // 百度
    if (appInfo.key === 'baiduMap') {
      action = baiduMapPath(appInfo, option);
    }
    // 腾讯
    if (appInfo.key === 'tencentMap') {
      action = tencentMapPath(appInfo, option);
    }
    plus.runtime.openURL(
      encodeURI(action),
      () => {
        uni.showToast({
          icon: 'none',
          title: '打开地图APP失败,即将跳转网页地图',
          duration: 2000,
          success: () => {
            let t = setTimeout(() => {
              clearTimeout(t);
              t = null;
              openGDWeb(option);
            }, 2000);
          }
        });
      },
      appInfo.pname
    );
  };
  // 高德跳转传参
  const aMapPath = (appInfo, option) => {
    return (
      appInfo.action +
      'route/plan?sourceApplication=&slat=' +
      option.startLocation[1] +
      '&slon=' +
      option.startLocation[0] +
      '&sname=' +
      option.startAddress +
      '&dlat=' +
      option.endLocation[1] +
      '&dlon=' +
      option.endLocation[0] +
      '&dname=' +
      option.endAddress +
      '&dev=0&t=0'
    );
  };
  // 百度跳转传参
  const baiduMapPath = (appInfo, option) => {
    return (
      appInfo.action +
      'map/direction?origin=name:' +
      option.startAddress +
      '|latlng:' +
      option.startLocation[1] +
      ',' +
      option.startLocation[0] +
      '&destination=name:' +
      option.endAddress +
      '|latlng:' +
      option.endLocation[1] +
      ',' +
      option.endLocation[0] +
      '&coord_type=' +
      locationType +
      '&mode=driving&car_type=BLK&src=123456'
    );
  };
  // 腾讯跳转传参
  const tencentMapPath = (appInfo, option) => {
    return (
      appInfo.action +
      'map/routeplan?type=drive&from=' +
      option.startAddress +
      '&fromcoord=' +
      option.startLocation[1] +
      ',' +
      option.startLocation[0] +
      '&to=' +
      option.endAddress +
      '&tocoord=' +
      option.endLocation[1] +
      ',' +
      option.endLocation[0] +
      '&referer=123'
    );
  };

  return {
    openMap
  };
};
const useGetMapsApp2=() =>{
	// 打开map软件列表,或者直接去导航
	const openMap = (option) => {
	  // 如果存在以上地图APP软件
	  if (mapList.length) {
	    // 只有一个地图软件,直接打开
	    if (mapList.length === 1) {
	      openApp(1, option);
	      return;
	    }
	    // 多个软件调起系统弹框,用户选择
	    plus.nativeUI.actionSheet(
	      {
	        cancel: '取消',
	        buttons: mapList.map((item) => ({
	          title: item.name
	        }))
	      },
	      function (e) {
	        if (e.index > -1) {
	          openApp(e.index, option);
	        }
	      }
	    );
	  } else {
	    openGDWeb(option);
	  }
	};
	return {
		openMap
	}
}
export default useGetMapsApp;
uniapp跳转第三方地图app
https://xiyu.pro/posts/37/
作者
席宇
发布于
2024-07-07
许可协议
CC BY-NC-SA 4.0