vue vmap 高德地图路线规划

组件

<template>
  <div class="map-wrap">
    <el-amap
      :amap-manager="amapManager"
      :zoom="14"
      :center="centerPosition"
      vid="amapDemo"
      ref="reds"
      style="width:100vw;height:80vh"
      :events="events"

    >
      <el-amap-marker
        v-for="(marker, index) in markerData"
        :position="marker.position"
        :events="marker.events"
        :content="marker.content"
        :key="index"
        :vid="index"
      ></el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
  import {
   AMapManager} from "vue-amap";

  let amapManager = new AMapManager();
  // var map = amapManager.getMap();

  export default {
   
    props: {
   
      // 中心坐标
      centerPosition: {
   
        type: Array,
        default: () => []
      },
      // 装维师傅数组
      markerData: {
   
        type: Array,
        default: () => []
      }
    },
    data() {
   
      let _obj = this;
      return {
   
        startMarker: null,
        endMarker: null,
        Driving: null,
        // 开始结束坐标
        startAndEnd: {
   
          Clng: "113.244313",
          Clat: "23.405258",
          Flng: "",
          Flat: "",
          Tlng: "",
          Tlat: "",
        },
        vid: new Date().toString(),
        events: {
   
          init() {
   
            _obj.startAndEnd = {
   
              Clng: "113.229342",
              Clat: "23.40691",
              Flng: "113.232072",
              Flat: "23.409362",
              Tlng: "113.269342",
              Tlat: "23.40691",
            };
            _obj.createMap(_obj.startAndEnd);
            // console.log(_obj.$refs.map.$$getInstance().getCenter())
          }
        },
        amapManager,
        // plugin: [
        //   {
   
        //     pName: "Scale",
        //     events: {
   
        //       init(instance) {
   
        //         console.log(instance);
        //
        //
        //       }
        //     }
        //   }
        // ],
      };
    }