调用百度Api实现获取两点之间的驾驶距离

時間-

已于 2023-06-09 13:28:41 修改

阅读量1k

点赞数

于 2023-05-30 10:11:09 首次发布

本文链接：https://blog.csdn.net/qq_54027065/article/details/130941052

版权

百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这个demo我找了很多资料，都没有找到自己需要的效果，所以记录一下。基于JS实现的.

案例是我通过官网东拼西凑出来的，有很多不足,简单记录一下

官网地址：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/helloworld 这是一个helloworld，点击他的demo就可以看到相对应的案例了。
在这里插入图片描述
1、我实现的效果图

注意：这里如果你输入的地点他搜索不到的话就会默认为北京，所以这里有问题（解决方法：当你输入的时候下方自动提示，然后选择提示的地点，这样就因该可以解决了，我只是有思路，当我在实现的时候，遇到了一些问题，这里不细说）

如果有哥们有这个解决方法的话可以分享看看，感谢！

2、JS代码
在这里插入图片描述
注意：

上面如果是 v=1.0就使用BMapGL | v=2.0就使用BMap
ak 则需要你在百度地图开放平台申请,我下面的demo使用的是浏览器端的应用.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算驾车时间与距离</title>
    <script type="text/javascript"
      src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=NSzgWirnDp***********Uqr0M41Rcj">
    </script>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }

      #allmap {
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div>
      起始地：<input type="text" id="qsd" value="上海市浦东新区五洲南路">
      -
      目的地：<input type="text" id="mdd" value="上海市朱家角古镇旅游区">

      <input type="button" onclick="getDistance()" value="查询" />
    </div>
    <div id='allmap'></div>
    <script type="text/javascript" language="JavaScript">
      var map = new BMapGL.Map("allmap");
      map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 15); // 初始化地图,设置城市和地图级别。
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      function getDistance() {
        map.clearOverlays(); //清楚地图上原有的标记
        var qsdVal = document.getElementById("qsd").value
        var mddVal = document.getElementById("mdd").value

        var output = "从 " + qsdVal + " 到 " + mddVal + " 驾车需要";
        var searchComplete = function(results) {
          if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
            return;
          }
          var plan = results.getPlan(0);
          output += plan.getDuration(true) + "\n"; //获取时间
          output += "总路程为：";
          output += plan.getDistance(true) + "\n"; //获取距离
        }
        var transit = new BMapGL.DrivingRoute(map, {
          renderOptions: {
            map: map
          },
          onSearchComplete: searchComplete,
          onPolylinesSet: function() {
            setTimeout(function() {
              alert(output)
            }, "1000");
          }
        });

        var start = "";
        var end = "";
        //创建地址解析器实例
        var myGeo = new BMapGL.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint(qsdVal, function(point) {
          console.log(point.lng + "," + point.lat)
          start = new BMapGL.Point(point.lng, point.lat);
        })
        myGeo.getPoint(mddVal, function(point) {
          console.log(point.lng + "," + point.lat)
          end = new BMapGL.Point(point.lng, point.lat);
        })

        setTimeout(function() {
          transit.search(start, end);
        }, 1000)
      }
    </script>
  </body>
</html>