高德路线图规划

简介: 高德路线图规划
<!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>
目录
相关文章
|
12月前
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
147 1
|
12月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
196 1
|
12月前
|
程序员 测试技术
程序员的代码规范需求
程序员的代码规范需求
126 1
|
12月前
|
JavaScript 前端开发
JavaScript事件监听
JavaScript事件监听
125 0
|
12月前
|
JavaScript 前端开发
checkbox中checked属性总结
checkbox中checked属性总结
327 0
|
12月前
弹性盒子的属性
弹性盒子的属性
237 0
|
12月前
|
XML 移动开发 前端开发
Canvas和SVG的区别
Canvas和SVG的区别
455 0
|
12月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
137 0
|
12月前
如何实现图片垂直旋转90度的问题
如何实现图片垂直旋转90度的问题
79 2
|
12月前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
79 3