H5唤起高德、百度、腾讯地图导航

🚀 本篇主要讲解在H5中如何唤起高德、百度、腾讯地图导航

一、微信浏览器环境中

在微信中H5是不支持唤起第三方地图的，若要实现导航 可采用weixin-js-sdk 进行导航
前提：需要有公众号并进行关联，公众号后台系统中需要添加前端访问域名，所以线上环境才可使用

// 1、先安装weixin Jsdk
cnpm i weixin-js-sdk --save

// 2、初始化配置参数
// res数据来源于后端
 wx.config({
   beta: true,
   debug: res.debug,
   appId: res.appId,
   timestamp: res.timestamp,
   nonceStr: res.nonceStr,
   signature: res.signature,
   jsApiList: res.jsApiList
 });

// 3、加载及使用
 wx.ready(function () {
   wx.openLocation({
     type: "gcj02",
     latitude: "纬度",
     longitude: "经度",
     name: "地址标题",
     scale: 18,
     address: "详细地址"
   });
 })

二、其它浏览器中

1. 百度地图跳转地址 官方参数文档

baidumap://map/walknavi?destination=${lat},${lng}&title=${name}&content=${addressStr}&output=html&coord_type=gcj02&src=test

1. 腾讯地图跳转地址

qqmap://map/marker?marker=coord:${lat},${lng};title:${name};addr:${addressStr}&referer=腾讯地图Key

2. 高德地图跳转地址 官方参数文档

ios: 'iosamap://navi?sourceApplication=mingyue&poiname=${name}&lat=${lat}&lon=${lng}&dev=0&t=2'
android: 'androidamap://viewMap?sourceApplication=mingyue&poiname=${name}&lat=${lat}&lon=${lng}&dev=0&t=2'

三、组件封装，一键使用

1. 新建NavigateMap.vue

<template>
  <slot>
    <van-button class="set-btn hover" @click="navigateLine" ontouchstart>导航</van-button>
  </slot>
  <van-action-sheet
    v-model:show="isShowSheet"
    title="使用地图打开"
    :actions="sheetList"
    cancel-text="取消"
    description="如果点击无响应，可能是您还没有安装该APP"
    close-on-click-action
    @select="handleSheetSelect"
  />
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { navigationWx, isWx, navToMap } from '@/utils/index';

const isShowSheet = ref(false)
const sheetList = [
  {
    name: '百度地图',
    id: 1,
  },
  {
    name: '高德地图',
    id: 2,
  },
  {
    name: '腾讯地图',
    id: 3,
  }
]

const navigateLine = () => {
  isWx().then((res) => {
    if (res !== 'no-wx') {
      navigationWx(getLocation())
    } else {
      isShowSheet.value = true
    }
  })
}
// 选择导航
const handleSheetSelect = (action: { id: Number }) => {
  navToMap(getLocation(), action.id)
}

// 获取位置信息
const getLocation = () => {
   return {
      lat: '纬度',
      lng: '经度',
      name: '目的地名称',
      address: '目的地详细地址'
   }
}

defineExpose({
  navigateLine
})
</script>
<style lang="scss" scoped>
button {
  width: 100%;
  height: 84px;
  border-radius: 50px;
  color: #333333;
  font-size: 34px;
  background: linear-gradient(90deg, #4DBFF8 0%, #3586C9 100%);
  color: #fff;
  border: 0;
}
</style>

2. 新建全局settings/index.ts

export const systemSetting = {
  // 腾讯地图Key
  txKey: 'xxxxxxxx',
  // 跳转App公共地址
  mapUrlConfig: {
    baidu: 'baidumap://map/walknavi',
    gaode: {
      ios: 'iosamap://navi',
      android: 'androidamap://viewMap'
    },
    tengxun: 'qqmap://map/marker'
  }
}

3. 新建utils/index.ts

import wx from 'weixin-js-sdk'
import { systemSetting } from '@/settings/index'
import { showToast } from 'vant';
/**
 * 跳转第三方地图 微信
 * @param addressInfo 地址信息
 */
export const navigationWx = (addressInfo: any) => {
  const { lat, lng, name, address } = addressInfo
  wx.ready(function () {
    wx.openLocation({
      type: "gcj02",
      latitude: Number(lat),
      longitude: Number(lng),
      name: name,
      scale: 18,
      address: address || ''
    });
  })
}

/**
 * 打开高德或百度地图
 * @param {*} latitude
 * @param {*} longitude
 * @param {*} name  导航目的地名称
 * @param {*} type 1 百度地图 2 高德地图
 */
export const navToMap = (addressInfo: any, type: Number) => {
  const { lat, lng, name, address } = addressInfo
  const addressStr = address || ''
  let url
  const u = navigator.userAgent
  //判断ios
  const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  //判断Android
  const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
  if (!isIOS && !isAndroid) {
    return showToast("此设备暂不支持")
  }
  if (type === 1) {
    // 百度
    url = `${systemSetting.mapUrlConfig.baidu}?destination=${lat},${lng}&title=${name}&content=${addressStr}&output=html&coord_type=gcj02&src=test`
  } else if (type === 3) {
    url = `${systemSetting.mapUrlConfig.tengxun}?marker=coord:${lat},${lng};title:${name};addr:${addressStr}&referer=${systemSetting.txKey}`
  } else {
    // 高德
    let params = `?sourceApplication=mingyue&poiname=${name}&lat=${lat}&lon=${lng}&dev=0&t=2`
    const { android, ios } = systemSetting.mapUrlConfig.gaode
    url = (isAndroid ? android : ios) + params
  }
  if (url) {
    window.location.href = url
  }
}

// 判断微信环境
export const isWx = () => {
  var ua = navigator.userAgent.toLowerCase();
  if (/micromessenger/.test(ua)) {
    return new Promise(resolve => {
      wx.miniProgram.getEnv(function (res) {
        if (res.miniprogram) {
          // 小程序种
          resolve("mini-wx");
        } else {
          // 微信环境种
          resolve("wx");
        }
      });
    });
  } else {
    // 不在微信种
    return new Promise(resolve => {
      resolve("no-wx");
    });
  }
}

🚀🚀🚀🚀 大功告成 🚀🚀🚀🚀