高德js,绘制路线

最新推荐文章于 2024-09-02 17:38:21 发布

原创最新推荐文章于 2024-09-02 17:38:21 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

高德地图专栏收录该内容

11 篇文章

订阅专栏

这篇博客详细介绍了如何利用高德地图JavaScript API来实现多点路径规划。首先，通过初始化地图并添加各种控件，如工具栏、比例尺等。然后，创建驾驶路线导航类，并设置路径规划策略。接着，根据经纬度坐标创建标记点，并在地图上展示。最后，调用搜索方法绘制路线，当状态为'complete'时，表示绘制路线完成。整个过程在Vue环境中进行，需要注意在HTML中引入地图相关的JS库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
在这里插入图片描述
首先,指路api
https://lbs.amap.com/demo/javascript-api/example/driving-route/plan-route-according-to-lnglat

    async initMap() {
      // 基本地图加载
      const map = new AMap.Map("container", {
        resizeEnable: true,
        center: [108.946726, 34.222857], // 地图中心点
        zoom: 13, // 地图显示的缩放级别
      });
  // 引入很重要
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.Transfer",
          "AMap.Geolocation",
          "AMap.StationSearch",
        ],
        () => {
          map.addControl(new AMap.ToolBar());
          map.addControl(new AMap.Scale());
          map.addControl(new AMap.Transfer());
          map.addControl(new AMap.Geolocation());
          map.addControl(new AMap.StationSearch());
        }
      );
      // 构造路线导航类
      const driving = new AMap.Driving({
        map: map,
        policy: AMap.DrivingPolicy.LEAST_TIME,
        // hideMarkers: true,
        panel: "panel",
      });


      const lats = this.list.map((item) => item.lngLat);
      const lagArr = (lats.length && lats[0]) || [];
      const startLngLat = [lagArr.lng, lagArr.lat];
      const latArr = (lats.length && lats[lats.length - 1]) || [];
      const endLngLat = [latArr.lng, latArr.lat];


      for (let index = 0; index < lats.length; index++) {
        const lastMarkerClass =
          index + 1 === lats.length ? " step-map-last" : "";
        var marker = new AMap.Marker({
          position: [lats[index].lng, lats[index].lat],
          content: `<div class="d-step-number${lastMarkerClass}">${
            index + 1
          }</div>`,
          offset: new AMap.Pixel(-13, -30),
        });
        marker.setMap(map);
      }
  //  在此处绘制路线
      driving.search(
        new AMap.LngLat(startLngLat[0], startLngLat[1]),
        new AMap.LngLat(endLngLat[0], endLngLat[1]),
        function (status, result) {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === "complete") {
            console.log("绘制路线完成");
          } else {
            console.log("获取路线失败：" + result);
          }
        }
      );
    },

// vue文件里面
   <div id="container" />
    <div id="panel" />  // 必须要有,不然出来

最重要的是要在index.html里面引入绘制地图的js
在这里插入图片描述