WEB使用VUE3实现地图导航跳转

我们在用手机查看网页时可以通过传入经纬度去设置目的地然后跳转到对应的地图导航软件，如果没有下载软件则会跳转到下载界面

注意：

1. 高德地图是一定会跳转到一个新网页然后去询问用户是否需要打开软件
2. 百度和腾讯地图是直接调用软件的
3. 这个方法有缺陷，因为我们判断用户是否下载软件是通过监听用户的行为，判断页面是否发生变化来决定的，但是某些移动操作系统，如iOS，在使用深度链接时可能总是提示用户确认是否打开第三方应用。（此时我们如果不去点击确认打开第三方应用，过两秒后页面也会自动跳转到对应的下载界面）这种行为是由操作系统控制的，可能没有办法绕过它。第三方应用程序的行为也起着作用。如果应用程序不能正确处理深度链接，它可能总是提示用户打开应用程序，即使它已经安装了。

不幸的是，由于这种行为受到移动操作系统和第三方应用的影响，可能没有一个放之四海而皆通的解决方案，这种行为可能会因不同的设备和应用版本而有所不同。当你在应用中实现深度链接时，测试和考虑你所瞄准的特定应用行为是很重要的。

代码

<template>
  <div class="app-container">
    <div v-for="(location, index) in locations" :key="index">
      <span>{{ location.name }}:</span>
      <el-select
        v-model="selectedType[index]"
        clearable
        @change="(e) => navigateToMap(location, selectedType[index])"
      >
        <el-option label="高德地图" value="gaode"></el-option>
        <el-option label="腾讯地图" value="tencent"></el-option>
        <el-option label="百度地图" value="baidu"></el-option>
      </el-select
    </div>
  </div>
</template>

<script setup>
import { ref, toRefs, reactive } from "vue";

const data = reactive({
  selectedType: [],
  userLocation: {},
  appOpenedFlag: false,
});

const { selectedType, userLocation, appOpenedFlag } = toRefs(data);

const locations = [
  {
    name: "南京热河路",
    latitude: 32.088169,
    longitude: 118.74247,
    destination: "32.088169,118.74247",
  },
  {
    name: "秦皇岛",
    latitude: 39.9658,
    longitude: 119.592224,
    destination: "39.9658,119.592224",
  },
  {
    name: "大理古城",
    latitude: 25.69547,
    longitude: 100.1655,
    destination: "25.69547,100.1655",
  },
];

// 获取用户当前位置
function getCurrentLocation() {
  navigator.geolocation.getCurrentPosition((position) => {
    userLocation.value = {
      lat: position.coords.latitude,
      lng: position.coords.longitude,
    };
  });
}

// 生成导航链接
function navigateToMap(location, type) {
  getCurrentLocation();
  const { name, latitude, longitude, destination } = location;

  let url = "";
  switch (type) {
    case "gaode":
      url = `https://uri.amap.com/navigation?to=${longitude},${latitude},${name}&mode=car&policy=2&src=myLocation&coordinate=gaode&callnative=1`;
      break;
    case "tencent":
      url = `qqmap://map/routeplan?type=drive&fromcoord=${userLocation.value.lat},${userLocation.value.lng}&tocoord=${destination}&referer=yourAppName`;
      break;
    case "baidu":
      url = `baidumap://map/direction?origin=${userLocation.value.lat},${userLocation.value.lng}&destination=${destination}&mode=driving&src=yourAppName`;
      break;
  }
  appOpenedFlag.value = false;
  window.location.href = url;

  // 检查用户在打开应用程序后是否返回到网页
  setTimeout(() => {
    if (!appOpenedFlag.value) {
      redirectToDownloadPage(type);
    }
  }, 2000);
}

// 回调函数，用于在应用程序成功打开时设置标志
window.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    appOpenedFlag.value = true;
  }
});

// 重定向到下载页面
function redirectToDownloadPage(type) {
  switch (type) {
    case "gaode":
      window.location.href = "https://www.amap.com/";
      break;
    case "baidu":
      window.location.href = "https://map.baidu.com/";
      break;
    case "tencent":
      window.location.href = "https://map.qq.com/";
      break;
  }
}
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

效果