初识vue-baidu-map

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

<template>
  <div id="map">
    <baidu-map class="map" :center="center" :zoom="17" :scroll-wheel-zoom="true" @ready="handler">
      <!-- 点坐标 -->
      <bm-marker :position="center"> </bm-marker>
      <!-- 折线 -->
      <bm-polyline :path="path" stroke-color="#00FFFF" :stroke-opacity="0.5" :stroke-weight="12"></bm-polyline>
      <!-- 路书，行驶轨迹 -->
      <bml-lushu
        @stop="stop"
        :path="path"
        :icon="icon"
        :play="play"
        :speed="100"
        :autoView="true"
        :content="content"
        :rotation="true"
      >
      </bml-lushu>
      <!-- 信息窗体 -->
      <bm-info-window
        :position="position"
        :show="isShow"
        :title="`<p style=color:blue;cursor:pointer>${form.name}</p>`"
        :closeOnClick="false"
        @clickclose="isShow = false"
        class="infoWindow"
        @click.native="handleInfoClick"
      >
        <ul>
          <li>位置：{{ form.location }}</li>
          <li>所属地区：{{ form.area }}</li>
        </ul>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

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%;
}