关于vue使用高德地图vue-amap实现路径规划

最新推荐文章于 2024-07-23 15:55:45 发布

置顶

细雨、

最新推荐文章于 2024-07-23 15:55:45 发布

阅读量4k

点赞数 3

分类专栏： Vue 文章标签： vue.js html jquery 街景地图

本文链接：https://blog.csdn.net/foreverlailai/article/details/109166087

版权

本文介绍如何在Vue项目中使用vue-amap插件实现路径规划。首先在main.js配置并安装vue-amap，然后在目标页面导入AMapManager。接着，定义起点和终点的标记以及路径规划逻辑。在组件的return内容中设置地图样式和中心点，最后在methods中编写相关方法。若需展示步行路径，可在相应方法中处理。

摘要由CSDN通过智能技术生成

1 在main.js里面应用要使用的组件等当然呢要先安装整个vue-amap
在这里插入图片描述
2 在使用页面中使用

 <div class="amap-page-container" style="height: 100vh"></div>//地图的出现
 //路径规划的一些详细路线显示
  <div
      id="panel"
      style="
        position: fixed;
        z-index: 150;
        bottom: 0;
        width: 100%;
        height: 150px;
        overflow-y: auto;
      "
    ></div>
    //<el-amap
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      :amap-manager="amapManager"
      class="amap-demo"
    >
    //渲染的点位
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker.position"
        :events="marker.events"
      ></el-amap