vue使用百度地图（标点、点击后展示弹框、多个标点、点聚合）_vue 百度地图 显示多个坐标

1. 安装百度地图

npm install vue-baidu-map --save

2. 在百度地图开放平台申请AK

3. 全局注册，在项目的main.js中引入

import Vue from "vue";
import baiduMap from "vue-baidu-map";
 
Vue.use(baiduMap, { ak: 在百度地图开放平台申请AK });

4.在public文件里的index.html中引入百度地图的点聚合工具开源库的文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=在百度地图开放平台申请AK "></script>
  <script type="text/javascript" src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js">
  </script>
  <script type="text/javascript" src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js">
  </script>

4. 效果全部代码

<template>
  <div id="test">
    <baidu-map class="bm-view" id="allmap" @ready="init"></baidu-map>
  </div>
</template>
 
<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {};
  },
  methods: {
    init() {
      var map = new BMap.Map("allmap"); // 创建地图实例
 
      var point = new BMap.Point(108.953723, 34.276202); //设置城市经纬度坐标
      map.centerAndZoom(point, 5); //
      map.setCurrentCity("西安"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //鼠标滚动缩放
      var setstyle = [
        {
          featureType: "water",
          elementType: "geometry.fill",
          stylers: {
            weight: "1",
            lightness: 1,
            saturation: 100,
            visibility: "on",
          },
          markersArr:[]
        },
      ];
      map.setMapStyle({
        styleJson: setstyle,
      });
 
      var data_info = [
        [
          110.229321,
          25.227083,
          "地址：广州省深圳市龙岗区<h4>标题格式啥的</h4>",
        ],
        [
          104.979273,
          25.096498,
          "地址：广州省深圳市龙岗区<h4>标题格式啥的</h4>",
 
        ],
        [
          112.60061,
          37.74101,
          "地址：广州省深圳市龙岗区<h4>标题格式啥的</h4>",
 
        ],
        [
          109.944203,
          40.764037,
          "地址：广州省深圳市龙岗区<h4>标题格式啥的</h4>",
        ],
        [
          126.448706,
          45.959158,
          "地址：广州省深圳市龙岗区<h4>标题格式啥的</h4>",
        ],
        [
          96.448706,
          30.959158,
          "地址：广州省深圳市龙岗区<h4>标题格式啥的</h4>",
        ],
        [
          100.448706,
          30.959158,
          "地址：广州省深圳市龙岗区<h4>标题格式啥的</h4>",
        ],
        [
          100.548706,
          30.959158,
          "地址：广州省深圳市龙岗区<h4>标题格式啥的</h4>",
        ],
        [
          100.648706,
          30.959158,
          "地址：广州省深圳市龙岗区<h4>标题格式啥的</h4>",
        ],
      ];
      var opts = {
        min_width: 250, // 信息窗口zuixiao宽度
        min_height: 80, // 信息窗口高度
        title: "详细信息", // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
      };
      var markersArr = [];
      for (var i = 0; i < data_info.length; i++) {
        var marker = new BMap.Marker(
          new BMap.Point(data_info[i][0], data_info[i][1])
        ); // 创建标注
        var content = data_info[i][2];
        map.addOverlay(marker); // 将标注添加到地图中
        addClickHandler(content, marker);
        markersArr.push(marker);
      }
      function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
          openInfo(content, e);
        });
      }
      function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
      }
 
      var markerClusterer = new BMapLib.MarkerClusterer(map, {
        markers: markersArr,
      });
    },
  },
  mounted() {
    // this.init();
  },
};
</script>
<style>
#test {
  height: 98vh;
  width: 100%;
  background-color: rgb(192, 228, 127);
}
.bm-view {
  width: 100%;
  height: 100%;
}
</style>