vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称

_院长大人_

已于 2023-07-22 10:46:31 修改

阅读量2.5k

点赞数

分类专栏： vue 高德组件文章标签： vue 高德地图可拖拽路径规划

于 2023-03-17 17:01:00 首次发布

本文链接：https://blog.csdn.net/qq_31745863/article/details/129624396

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

高德组件

3 篇文章 1 订阅

订阅专栏

问题记录

vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称

官方文档及示例

DragRoute相关API

API中没有任何方法让我们对每个经过点进行设置,所以只能我们自己实现

实现效果如下:

集成DragRoute到自己的组件

设置变量
引入DragRoute组件

以上步骤完成后就集成了DragRoute组件

对每个经过点设置不同的经过点名称

_path中存储的数据如下图是一个LngLat对象,但是转换为json字符串后就是一个经纬度数组

父组件中

   getRoutePath(childValue){
     this.form.routePathString=JSON.stringify(childValue)
   },

将数据库中的数据加载到重新加载到route中

此处我将DragRoute的初始化单独抽取成了一个方法,

此时其实已经完成了目的功能

但是存储到后端后再次加载地图所有的经过点的content都是一样的效果如下:

这是因为我们的路径点的content都在初始化时都被midMarkerOptions设置为相同的了

解决路径点content相同问题

主要的思路是将route中的marker都重新修改content后再重新加载就可以实现了

updateMindPointContext: function () {
        let pathList = this.route._list
        console.log(pathList)
        let startPoint = pathList[0]
        let endPoint = pathList[pathList.length - 1]
        let mindPoint = []
        pathList.forEach(item => {
          if (item.id != startPoint.id && item.id != endPoint.id) {
            mindPoint.push(item)
          }
        })
        let count = 1
        mindPoint.forEach(item => {
          item.marker._opts.label.content = '经过点' + count
          count++
          item.marker.setContent('')//需要set一下上面代码才会生效
        })
        pathList = []
        pathList.push(startPoint)
        pathList.push(...mindPoint)
        pathList.push(endPoint)
        this.route._list = pathList
      },

然后我们在每次初始化时都调用此方法就解决了

组件代码

<template>
  <div>
    <a-row>
      <div id="container"></div>
      <div class='input-card-ControlBar' v-show="visible">
        <div class="input-item">
          <a-checkbox @change="toggleScale" :checked="toggleScaleCheck">比例尺</a-checkbox>
        </div>

        <div class="input-item">
          <a-checkbox @change="toggleToolBar" :checked="toggleToolBarCheck">工具条</a-checkbox>
        </div>

        <div class="input-item">
          <a-checkbox @change="toggleControlBar" :checked="toggleControlBarCheck">工具条方向盘</a-checkbox>
        </div>

        <div class="input-item">
          <a-checkbox @change="toggleOverViewShow" :checked="toggleOverViewShowCheck">显示鹰眼</a-checkbox>
        </div>
      </div>
      <div class="input-card-MouseTool" style='width: 24rem;' v-show="visible">
        <div class="input-item">
          左击获取经纬度: <input type="text" :value="clickValue">
        </div>

        <div class="input-item">
          <a-radio-group v-model="drawOptionValue" :options="drawOptions" @change="onChangeDrawOption"/>
        </div>
        <div class="input-item" style="margin-top: 10px">
          <a-button type="primary" size="small" style="width: 90px" @click="clearMap">
            清除
          </a-button>
          <a-button type="primary" size="small" style="margin-left: 10px;width: 90px" @click="closeDram">
            关闭绘图
          </a-button>
        </div>
      </div>
    </a-row>
  </div>

</template>

<script>
  //这里可以导入其他文件（比如： 组件， 工具 js， 第三方插件 js， json文件， 图片文件等等）
  //例如： import 《组件名称》 from '《组件路径》 ';

  import AMapLoader from "@amap/amap-jsapi-loader";
  // 设置安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: 'xxxx',
  }
  export default {
    name: 'MapContainer',
    //import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {
      visible: Boolean,
      drewData: Array,
      routePathP: Array,
    },
    data() {
      //这里存放数据
      return {
        AMap: null,
        //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
        map: null,
        mouseTool: null,
        //监听draw事件可获取画好的覆盖物
        overlays: [],
        auto: null,
        placeSearch: null,
        drawOptionValue: '',
        drawOptions: [
          {label: '画点', value: 'marker'},
          {label: '画折线', value: 'polyline'},
          {label: '画多边形', value: 'polygon'},
          {label: '画矩形', value: 'rectangle'},
          {label: '画圆', value: 'circle'},
          {label: '路径规划', value: 'routePath'},
          {label: '获取经纬度', value: 'position'},
        ],
        //--地图控件 --
        toggleOverViewShowCheck: true,
        toggleControlBarCheck: true,
        toggleToolBarCheck: true,
        toggleScaleCheck: true,
        scale: null,
        toolBar: null,
        controlBar: null,
        overView: null,
        //坐击经纬度
        clickValue: '',
        //可拖拽路线规划
        route: null,
        routePath: this.routePathP,
        startAndEnd:[],
      };
    },
    //计算属性 类似于 data 概念
    computed: {},
    //监控 data 中的数据变化
    watch: {
      overlays(newVal, oldVal) {
        this.$emit('getOverlaysValue', newVal)
      },
      drewData(newValue, oldValue) {
        this.mountDrewData()
      },
      routePathP(newValue, oldValue){
        this.routePath=this.routePathP;
        this.initPathAssign(this.AMap)
      },
      startAndEnd(newValue, oldValue){
        if (this.startAndEnd.length==2){
          this.routePath=this.startAndEnd.map(item=>{
            return item.getPosition()
          })
          console.log(this.routePath)
          this.initPathAssign(this.AMap)
          this.startAndEnd.forEach(item=>{
            item.remove()
          })
          this.startAndEnd=[]
        }
      }
    },
    //方法集合
    methods: {
      toggleOverViewShow(e) {
        this.toggleOverViewShowCheck = e.target.checked
        if (e.target.checked) {
          this.overView.show();
        } else {
          this.overView.hide();
        }
      },
      toggleControlBar(e) {
        this.toggleControlBarCheck = e.target.checked
        if (e.target.checked) {
          this.controlBar.show()
        } else {
          this.controlBar.hide()
        }
      },
      toggleToolBar(e) {
        this.toggleToolBarCheck = e.target.checked
        if (e.target.checked) {
          this.toolBar.show();
        } else {
          this.toolBar.hide();
        }
      },
      toggleScale(e) {
        this.toggleScaleCheck = e.target.checked
        if (e.target.checked) {
          this.scale.show();
        } else {
          this.scale.hide();
        }
      },
      closeDram() {
        this.mouseTool.close(true)
        this.drawOptionValue = ''
      },
      clearMap() {
        this.map.remove(this.overlays)
        this.overlays = [];
        this.route.destroy()
        this.$emit('getRoutePath', [])
        // this.$emit('getOverlaysValue', this.overlays)
      },
      onChangeDrawOption(e) {
        console.log('radio checked', e.target.value);
        this.draw(e.target.value)
      },
      initMapTool() {
        this.scale = new AMap.Scale();
        this.toolBar = new AMap.ToolBar({
          position: {
            top: '110px',
            right: '40px'
          }
        });
        this.controlBar = new AMap.ControlBar({
          position: {
            top: '10px',
            right: '10px',
          }
        });
        this.overView = new AMap.HawkEye({
          position: {
            top: '10px',
            left: '10px',
          },
          opened: false
        });
        this.map.addControl(this.scale);
        this.map.addControl(this.toolBar);
        this.map.addControl(this.controlBar);
        this.map.addControl(this.overView);
      },
      initMouseTool(AMap) {
        this.mouseTool = new AMap.MouseTool(this.map);
        // 监听draw事件可获取画好的覆盖物
        this.mouseTool.on('draw', function (e) {
          this.overlays.push(e.obj);
        }.bind(this))
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        this.map.on('click', function (e) {
          if (this.drawOptionValue=='routePath'){
            if (this.startAndEnd.length==0){
              let start = new AMap.Marker({
                icon: "//webapi.amap.com/theme/v1.3/markers/n/start.png",
                position: [e.lnglat.getLng(),e.lnglat.getLat()],
                offset: new AMap.Pixel(-13, -30)
              });
              start.setMap(this.map);
              this.startAndEnd.push(start)
            }else if (this.startAndEnd.length==1){
              let end = new AMap.Marker({
                icon: "//webapi.amap.com/theme/v1.3/markers/n/end.png",
                position: [e.lnglat.getLng(),e.lnglat.getLat()],
                offset: new AMap.Pixel(-13, -30)
              });
              end.setMap(this.map);
              this.startAndEnd.push(end)
            }
          }
          if (this.drawOptionValue=='position'){
            this.clickValue = e.lnglat.getLng() + ',' + e.lnglat.getLat()
          }

        }.bind(this));
        this.mountDrewData()

      },
      mountDrewData(){
        if (this.drewData!=null){
          this.drewData.forEach(item => {
            this.drew(item.overlayType, item.opts)
          })
        }
      },

      updateMindPointContext: function () {
        let pathList = this.route._list
        console.log(pathList)
        let startPoint = pathList[0]
        let endPoint = pathList[pathList.length - 1]
        let mindPoint = []
        pathList.forEach(item => {
          if (item.id != startPoint.id && item.id != endPoint.id) {
            mindPoint.push(item)
          }
        })
        let count = 1
        mindPoint.forEach(item => {
          item.marker._opts.label.content = '经过点' + count
          count++
          item.marker.setContent('')//需要set一下上面代码才会生效
        })
        pathList = []
        pathList.push(startPoint)
        pathList.push(...mindPoint)
        pathList.push(endPoint)
        this.route._list = pathList
      },
      initPathAssign (AMap) {
        // this.routePath.push([104.050025, 30.6683]);
        // this.routePath.push([104.044078, 30.671447]);

        this.route = new AMap.DragRoute(this.map, this.routePath, AMap.DrivingPolicy.LEAST_FEE, {
          midMarkerOptions: {
            // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
            label: {
              content: '路径点'+(this.routePath.length-1)
            }
          }
        }); //构造拖拽导航类
        this.route.search(); //查询导航路径并开启拖拽导航
        this.route.on('addway', function (e) {
          // e.target.midMarkerOptions.icon= '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-'+(this.route.getWays().length+1)+'.png'
          e.target.midMarkerOptions.label.content = '路径点' + (this.route.getWays().length + 1)
          this.$emit('getRoutePath', this.route._path)
        }.bind(this))
        this.updateMindPointContext();
      },
      initMap() {
        AMapLoader.load({
          key: "xxxxxx",             // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          "plugins": [
            "AMap.Scale",
            "AMap.HawkEye",
            "AMap.ToolBar",
            "AMap.AutoComplete",
            "AMap.PlaceSearch",
            "AMap.ControlBar",
            "AMap.MouseTool",
            "AMap.DragRoute"],         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
          this.AMap=AMap
          this.map = new AMap.Map("container", {  //设置地图容器id
            viewMode: "2D",  //  是否为3D地图模式
            zoom: 13,   // 初始化地图级别
            center: [104.065735, 30.659462], //中心点坐标  成都
            resizeEnable: true
          });
          this.initMouseTool(AMap);
          //地图工具
          this.initMapTool();
          //路径规划工具初始化
          this.initPathAssign(AMap);


        }).catch(e => {
          console.log(e);
        })
      },
      draw(type) {
        switch (type) {
          case 'marker': {
            this.mouseTool.marker({
              //同Marker的Option设置
            });
            break;
          }
          case 'polyline': {
            this.mouseTool.polyline({
              strokeColor: '#80d8ff'
              //同Polyline的Option设置
            });
            break;
          }
          case 'polygon': {
            this.mouseTool.polygon({
              fillColor: '#00b0ff',
              strokeColor: '#80d8ff'
              //同Polygon的Option设置
            });
            break;
          }
          case 'rectangle': {
            this.mouseTool.rectangle({
              fillColor: '#00b0ff',
              strokeColor: '#80d8ff'
              //同Polygon的Option设置
            });
            break;
          }
          case 'circle': {
            this.mouseTool.circle({
              fillColor: '#00b0ff',
              strokeColor: '#80d8ff'
              //同Circle的Option设置
            });
            break;
          }
        }
      },
      drew(type, opts) {
        switch (type) {
          case 'marker': {
            opts.map = this.map
            let o = new AMap.Marker(opts);
            this.overlays.push(o);
            break;
          }
          case 'polyline': {
            opts.map = this.map
            let o = new AMap.Polyline(opts)
            this.overlays.push(o);
            break;
          }
          case 'polygon': {
            opts.map = this.map
            let o = new AMap.Polygon(opts)
            this.overlays.push(o);
            break;
          }
          case 'rectangle': {
            opts.map = this.map
            let o = new AMap.Rectangle(opts)
            this.overlays.push(o);
            break;
          }
          case 'circle': {
            opts.map = this.map
            let o = new AMap.Circle(opts)
            this.overlays.push(o);
            break;
          }
        }
      }
    },
    //生命周期 - 创建完成（可以访问当前 this 实例）
    created() {
    },
    //生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {
      this.initMap();
    },
    //生命周期 - 创建之前
    beforeCreate() {
    },
    //生命周期 - 挂载之前
    beforeMount() {
    },
    //生命周期 - 更新之前
    beforeUpdate() {
    },
    //生命周期 - 更新之后
    updated() {
    },
    //生命周期 - 销毁之前
    beforeDestroy() {
    },
    //生命周期 - 销毁完成
    destroyed() {
    },
    //如果页面有 keep-alive 缓存功能， 这个函数会触发
    activated() {
    },
  }
</script>

<style scoped>
  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 800px;
  }

  .input-item {
    height: 2.2rem;
  }

  .input-card-ControlBar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    width: 10rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    bottom: 12rem;
    right: 2rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }

  .input-card-MouseTool {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    width: 10rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    bottom: 12rem;
    right: 12rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }
</style>

父组件使用示例代码

<template>
  <Map-Container
    ref="mapChild"
    :visible="drawerVisible"
    :drewData="drewData"
    :routePathP="routePath"
    @getOverlaysValue="getOverlaysValue"
    @getRoutePath="getRoutePath">

  </Map-Container>
</template>

<script>
  import MapContainer from "@/pages/components/map/MapContainer";
  export default {
    name: 'Post',
    components: { MapContainer},
    data() {
      return {
        drewData: [],
        form: {
          overlays: '',
          createBy: '',
          routePathString: '',
        },
        routePath: [],
      }
    },
    methods: {
      getRoutePath(childValue){
        this.form.routePathString=JSON.stringify(childValue)
      },
      getOverlaysValue: function (childValue) {

        let overlaysString = []
        overlaysString = childValue.map(item => {
          switch (item.className) {
            case 'AMap.Marker': {
              item._opts.map = null
              let opts = item._opts
              let overlay = {
                overlayType: 'marker',
                opts: opts
              }
              return overlay
            }
            case 'Overlay.Polyline': {
              item._opts.map = null
              let opts = item._opts
              let overlay = {
                overlayType: 'polyline',
                opts: opts
              }
              return overlay
            }
            case 'Overlay.Polygon': {
              item._opts.map = null
              let opts = item._opts
              let overlay = {
                overlayType: 'polygon',
                opts: opts
              }
              return overlay
            }
            case 'Overlay.Rectangle': {
              item._opts.map = null
              let opts = item._opts
              let overlay = {
                overlayType: 'rectangle',
                opts: opts
              }
              return overlay
            }
            case 'Overlay.Circle': {
              item._opts.map = null
              let opts = item._opts
              let overlay = {
                overlayType: 'circle',
                opts: opts
              }
              return overlay
            }
          }
        })
        this.form.overlaysString = JSON.stringify(overlaysString)
      },
    }
  }
</script>

<style lang="less" scoped>
  .search {
    margin-bottom: 54px;
  }

  .fold {
    width: calc(100% - 216px);
    display: inline-block
  }

  .operator {
    margin-bottom: 18px;
  }

  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>

_院长大人_

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
4
评论
vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称

主要的思路是将route中的marker都重新修改content后再重新加载就可以实现了。此处我将DragRoute的初始化单独抽取成了一个方法,以上步骤完成后就集成了DragRoute组件。然后我们在每次初始化时都调用此方法就解决了。引入DragRoute组件。此时其实已经完成了目的功能。
复制链接

扫一扫