学会使用vue-baidu-map

地图的使用已是现在大数据时代的趋势所在，学会使用地图是必不可少的，今天就来谈谈如何使用百度的地图，在vue中我们通常使用百度地图的二次封装vue-baidu-map。

import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import { BmlLushu } from "vue-baidu-map";
import { getAverage } from "@/utils/methods";
export default {
  data() {
    return {
      center:{ lng: 118.678105, lat: 31.954918},
      position: {},
      form: {},
      isShow: false,
      play: true,
      icon: {
        url: "http://api.map.baidu.com/library/LuShu/1.2/examples/car.png",
        size: { width: 52, height: 26 },
        opts: { anchor: { width: 27, height: 13 } },
      },
      path: [],
      content: "",
    };
  },
  components: { BaiduMap, levelTree ，BmlLushu },
  mounted() {
    this.isShow = true;
    this.path = [
      { lng: 118.671570, lat: 31.950587 },
      { lng: 118.684250, lat: 31.959605 },
    ];
    const lng = getAverage(this.path, "lng");
    const lat = getAverage(this.path, "lat");
    this.position = {
      ...lng,
      ...lat,
    };
    //点击信息窗体触发
    this.$nextTick(params => {
      document.getElementsByClassName("BMap_bubble_title")[0].onclick = this.handleInfoClick;
    });
  },
  methods: {
    //传递信息给父组件
    handleInfoClick() {
      this.$emit("handleInfoClick", this.form);
    },
    stop() {
      this.play = false;
      this.content = "到达了";
    },
    // 初始化
    handler({ BMap, map }) {
      this.map = map;
      // 创建标注
      this.map.setMapStyleV2({ styleId: "1c7acffbfbadbf927ec1b3453f059e90" });
      this.content = "出发了";
    }
  },
};

#map {
  height: calc(100vh - 152px);
  position: relative;
  
  ::v-deep .anchorBL {
    display: none;
  }
  .infoWindow {
    cursor: pointer;
    li {
      font-size: 14px;
      line-height: 1.5;
    }
  }
}
.map {
  width: 100%;
  height: 100%;
}