高德路线图规划-阿里云开发者社区

高德路线图规划

2024-10-12 33

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 高德路线图规划

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>位置经纬度 + 驾车规划路线</title>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
 
      #panel {
        position: fixed;
        background-color: white;
        max-height: 90%;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        width: 280px;
        z-index: 1000;
      }
 
      #panel .amap-call {
        background-color: #009cf9;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
 
      #panel .amap-lib-driving {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        overflow: hidden;
      }
    </style>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
 
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "0f8e6c7f349f877a4d85c8f7e53320ac",
      };g
    </script>
    <script type="text/javascript"
      src="https://webapi.amap.com/maps?v=2.0&key=4c7f1997b54559d7072f04e17afdfde8&plugin=AMap.Driving"></script>
 
    <script type="text/javascript">
      var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923], // 默认北京市中心
        zoom: 13 // 缩放级别
      });
 
      var startPoint; // 起点经纬度
      var endPoint; // 终点经纬度
 
      // 构造路线导航类
      var driving = new AMap.Driving({
        map: map,
      });
 
      // 创建函数，根据起点和终点经纬度规划驾车导航路线
      function and(start, end) {
        driving.search(new AMap.LngLat(start[0], start[1]), new AMap.LngLat(end[0], end[1]), function(status, result) {
          if (status === 'complete') {
            console.log('绘制驾车路线完成');
          } else {
            console.error('获取驾车数据失败：' + result);
          }
        });
      }
 
      // 监听地图点击事件获取点击的经纬度坐标
      map.on('click', function(e) {
        var lng = e.lnglat.getLng();
        var lat = e.lnglat.getLat();
 
        if (!startPoint) {
          // 第一次点击，设置为起点
          startPoint = [lng, lat];
          console.log('当前为起点：' + lng + ',' + lat);
        } else {
          // 第二次点击，设置为终点并绘制路线
          endPoint = [lng, lat];
          console.log('当前为终点：' + lng + ',' + lat);
          and(startPoint, endPoint);
 
          // 清空起点和终点，准备下一次点击
          startPoint = null;
          endPoint = null;
        }
      });
    </script>
  </body>
</html>