vue2+百度地图（多个标记点+信息窗体）

1、安装Vue Baidu Map

npm install vue-baidu-map --save

2、在main.js引入

import BaiduMap from 'vue-baidu-map'
// 百度地图
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥
  ak: 'xx'
})

3、vue文件的具体代码

<template>
  <div class="MapTest">
    <BMap
      :center="center"
      class="map"
      :scroll-wheel-zoom="true"
      :zoom="zoom"
      @ready="bMapLoad"
    />
  </div>
</template>
 
<script>
import BMap from "vue-baidu-map/components/map/Map";

let mapConstructor; // 百度地图构造函数存放容器

export default {
  name: "MapTest",
  components: {
    BMap,
  },
  data() {
    return {
      // mapPoint,
      center: {
        // lng: 116.404,
        // lat: 39.915,
      },
      pointsList: [],
      zoom: 20,
      map: null, // 地图容器
      BMap: null, // 构造器容器
    };
  },
  mounted() {
    
  },
  methods: {
    
    // BMap加载触发实例化方法
    async bMapLoad({ BMap, map }) {
      // 根据接口获取的数据（取第一个）
      // list 模拟参数
      const list = [
          {lng:xxxx,lat:xxxx},
          {lng:xxxx,lat:xxxx},
      ]

      this.center = {
        lng: this.list[0].lng,
        lat: this.list[0].lat,
      };

      this.pointsList = this.list.map((v) => {
        v.longitude = v.lng;
        v.latitude = v.lat;
        return v;
      });

      // 百度地图容器全局化
      this.map = map;
      // 百度地图构造函数全局化
      mapConstructor = BMap;
      this.BMap = BMap;
      this.bMapPoint();
    },

    // 在百度地图上打点方法
    async bMapPoint() {
      // 清除地图上的覆盖物
      this.map.clearOverlays();
      //  对多个经纬度点进行标注
      this.pointsList.forEach((element) => {
        const mPoint = new mapConstructor.Point(
          element.longitude * 1,
          element.latitude * 1
        );

        var marker = new mapConstructor.Marker(mPoint, {
          enableDragging: true,
        });

        // 在地图上添加点标记
        this.map.addOverlay(marker);
        const label = new mapConstructor.Label(
          element.user_name,
          // `(${element.longitude * 1},${element.latitude * 1})`,
          {
            position: {
              lng: element.longitude * 1,
              lat: element.latitude * 1,
            }, // 文本绑定的点位位置
            offset: new mapConstructor.Size(2, -16), // 文本位置移动
          }
        );
        // 自定义文字样式
        label.setStyle({
          color: "black",
          fontSize: "12px",
          height: "20px",
          lineHeight: "20px",
          border: "1px solid #000",
        });
        // 将标注添加到地图中
        this.map.addOverlay(label);
        // 窗体内容
        var sContent =
          "<div style='color:#333;font-size:14px;'>" +
          "这里放上需要展示的信息"+
          "</div>";
        // 窗体样式
        var sContentStyle = {
          width: 250,
        };

        var infoWindow = new mapConstructor.InfoWindow(sContent, sContentStyle);

        marker.addEventListener("click", function () {
          this.openInfoWindow(infoWindow);
        });
      });
    },
  },
};
</script>
 
<style scoped lang="scss">
.MapTest {
  padding: 20px;
}
.map {
  width: 100%;
  height: calc(100vh - 240px);
}

</style>