vue使用高德地图地图开发,使用的cdn引入方法,怎么使用步行路径规划api?

修改后

draw_way() {
      let location_point = [
        {
          start: [117.066993, 36.63845],
          end: [117.063498, 36.638153]
        }
      ];
      // 注册步行规划插件
      AMap.plugin("AMap.Walking", () => {
        location_point.forEach((item, index) => {
          let startPoint = location_point[index].start;
          let endPoint = location_point[index].end;
          this.walking = new AMap.Walking({
            map: this.map,
            panel: "panel" + index
          });
          this.walking.search(startPoint, endPoint, (status, result) => {
            if (status === "complete") {
              let routes = result.routes;
              let point_path = routes[0].steps;

              point_path.forEach((item, index) => {
                let polyline = new AMap.Polyline({
                  map: this.map,
                  path: point_path[index].path,
                  strokeColor: "red",

                  strokeOpacity: 0.7,
                  strokeWeight: 4
                });
              });
            } else {
              console.error(result);
            }
          });
        });
      });
    },

实现效果
image.png

阅读 2.3k
avatarAI BotBETA

使用高德地图的步行路径规划API,首先需要在Vue项目中使用CDN引入高德地图的JavaScript库。在index.html文件中添加如下代码:

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>

其中,key=您申请的key值需要替换成您在高德开放平台申请的有效key值。接着,您可以在Vue组件中编写路径规划的逻辑,如您提供的代码所示。

draw_way()函数中,使用AMap.plugin()方法注册步行规划插件。然后,定义一个包含起点和终点坐标的数组location_point,并遍历执行路径规划。对于每一对起点和终点坐标,创建一个AMap.Walking对象,通过walking.search()方法发起路径规划的请求。回调函数中,根据返回的结果绘制路径。

需要注意的是,您提供的代码中路径绘制的部分有一处错误,应该将this.walking修改为walking。另外,绘制路径的代码似乎缺少了一对大括号。

在以上代码的基础上,您还需要在Vue组件中添加一个<div>元素来显示路径规划的结果,即地图和步行路线的文字描述。例如,在模板中添加如下代码:

<div v-for="(item, index) in location_point" :key="index">
  <div id="panel{{index}}"></div>
</div>

这样,在每个步行路线的下方会显示一个用于展示步行路线的文字信息的面板。

最后,调用draw_way()函数即可开始绘制路径规划。

根据您提供的代码和需求,以上是使用高德地图 JavaScript库实现步行路径规划的方法。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题