如何使用H5喚起原生地圖APP（百度、高德、騰訊地圖等）

王铁柱6發表於2024-12-08
H5地圖APP

要使用 H5 喚起原生地圖 App（百度、高德、騰訊地圖等），你需要利用 URL Schemes。每個地圖 App 都定義了自己的 URL Scheme，透過在 H5 頁面中構建特定的 URL 並跳轉，即可喚起相應的 App。

以下是一些常用地圖 App 的 URL Scheme 和使用方法示例：

1. 百度地圖:

  • URL Scheme: baidumap://

  • 示例:

function openBaiduMap(longitude, latitude, name) {
  const url = `baidumap://map/marker?location=${latitude},${longitude}&title=${encodeURIComponent(name)}&content=${encodeURIComponent(name)}&src=webapp`;
  window.location.href = url;
}

// 例如：開啟百度地圖，顯示名為“目的地”的標記，經度為116.404，緯度為39.915
openBaiduMap(116.404, 39.915, "目的地");

2. 高德地圖:

  • URL Scheme: iosamap://

  • 示例:

function openGaodeMap(longitude, latitude, name) {
  const url = `iosamap://navi?sourceApplication=webapp&backScheme=myapp://&lat=${latitude}&lon=${longitude}&name=${encodeURIComponent(name)}&dev=0`;
  window.location.href = url;
}

// 例如：開啟高德地圖，導航到名為“目的地”的位置，經度為116.404，緯度為39.915
openGaodeMap(116.404, 39.915, "目的地");

3. 騰訊地圖:

  • URL Scheme: qqmap://

  • 示例:

function openTencentMap(longitude, latitude, name) {
  const url = `qqmap://map/rgeo?location=${latitude},${longitude}&name=${encodeURIComponent(name)}&coord_type=1&policy=0`;
  window.location.href = url;
}

// 例如：開啟騰訊地圖，顯示名為“目的地”的標記，經度為116.404，緯度為39.915
openTencentMap(116.404, 39.915, "目的地");

通用方法及最佳化：

function openMap(longitude, latitude, name, mapApp) {
  let url;
  switch (mapApp) {
    case 'baidu':
      url = `baidumap://map/marker?location=${latitude},${longitude}&title=${encodeURIComponent(name)}&content=${encodeURIComponent(name)}&src=webapp`;
      break;
    case 'gaode':
      url = `iosamap://navi?sourceApplication=webapp&backScheme=myapp://&lat=${latitude}&lon=${longitude}&name=${encodeURIComponent(name)}&dev=0`;
      break;
    case 'tencent':
      url = `qqmap://map/rgeo?location=${latitude},${longitude}&name=${encodeURIComponent(name)}&coord_type=1&policy=0`;
      break;
    default:
      console.error('不支援的地圖型別');
      return;
  }

  // 使用iframe開啟URL Scheme，避免直接跳轉導致頁面卡死
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = url;
  document.body.appendChild(iframe);
  setTimeout(() => {
    document.body.removeChild(iframe);
  }, 1000);


  // 定時器檢測是否喚起成功，如果失敗則跳轉到網頁版地圖
  let timer = setTimeout(() => {
      window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${encodeURIComponent(name)}&src=mypage&coordinate=gaode&callnative=0`; // 預設跳轉高德網頁版
    }, 2000);

    window.addEventListener('blur', () => {
        clearTimeout(timer)
    });

}


openMap(116.404, 39.915, "目的地", "baidu");

關鍵點:

  • encodeURIComponent(): 對名稱進行編碼，避免特殊字元導致 URL 解析錯誤。
  • iframe: 使用 iframe 開啟 URL Scheme，避免頁面卡死，提升使用者

相關文章