H5中唤起百度或高德地图并规划路径

牛老师讲GIS

发布于 2024-12-30 10:48:20

13600

代码可运行

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

运行总次数：0

代码可运行

概述

本文分享在H5中唤起手机中的高德地图或百度地图APP，并传入起始位置规划路径。

效果

实现

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  <link rel="stylesheet" href="lib/mapbox-gl.css" type="text/css">
    <style>
      html,
      body,
      #map {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
      .tool {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 9;
      }
      #location {
        position: absolute;
        bottom: 1rem;
        left: 1rem;
        z-index: 9;
        padding: 0.3rem 1rem;
        background-color: white;
        width: calc(100% - 4rem);
        text-align: center;
        border-radius: 0.3rem;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map">
      <div id="location"></div>
      <div class="tool">
        <button id="amap">高德</button>
        <button id="bdmap">百度</button>
      </div>
    </div>
   <script src="lib/mapbox-gl.js"></script>
    <script>
      const map = new mapboxgl.Map({
        container: "map",
        center: [114.06705183665042, 22.65447650819611],
        zoom: 3,
      });

      let center = [];

      function showPosition(position) {
        const { latitude, longitude } = position.coords;
        document.getElementById("location").innerHTML =
          "Latitude: " + latitude + ", Longitude: " + longitude;
        map.flyTo({
          center: [longitude, latitude],
          zoom: 15,
        });
        center = [longitude, latitude];
        new mapboxgl.Marker({
            color: '#ff0000',
        }).setLngLat([longitude, latitude]).addTo(map);
      }

      function getMapScheme(from, to, mapType = "gaode") {
        const u = navigator.userAgent;
        const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        const andriodBaidu = (to) => {
          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) => {
          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) => {
          return `amapuri://route/plan/?sourceApplication=mhc&dlat=${to.latitude}&dlon=${to.longitude}&dname=${to.name}&dev=0&t=0`;
        };
        const iOSGaode = (to) => {
          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);
          }
        }
      }

      function showError(error) {
        switch (error.code) {
          case error.PERMISSION_DENIED:
            document.getElementById("location").innerHTML =
              "User denied the request for Geolocation.";
            break;
          case error.POSITION_UNAVAILABLE:
            document.getElementById("location").innerHTML =
              "Location information is unavailable.";
            break;
          case error.TIMEOUT:
            document.getElementById("location").innerHTML =
              "The request to get user location timed out.";
            break;
          case error.UNKNOWN_ERROR:
            document.getElementById("location").innerHTML =
              "An unknown error occurred.";
            break;
        }
      }
      map.on("load", () => {
        if ("geolocation" in navigator) {
          navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
          document.getElementById("location").innerHTML =
            "Geolocation is not supported by this browser.";
        }

        const from = { name: '我的位置', longitude: center[0], latitude: center[1] }; // 出发地，不传则默认当前位置
        const to = { name: '宝安体育馆', longitude: 113.87486718701842, latitude:22.562459090345357 }; // address：目的地

        const gdUrl = getMapScheme(from, to, "gaode")
        const bdUrl = getMapScheme(from, to, "baidu")
        document.getElementById("location").innerHTML =
            `${gdUrl}<br>${bdUrl}`;
        document.getElementById("amap").setAttribute('href', gdUrl)
        document.getElementById("bdmap").setAttribute('href', bdUrl)
      });
    </script>
  </body>
</html>

注意：不能微信中打开，在手机自带的浏览器或安装的其他浏览器中才可以打开。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-08-14，如有侵权请联系 cloudcommunity@tencent.com 删除

location