vue项目中使用聚合地图

1、在index.html引入相关js

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<!--引入聚合点文件-->
<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

2、添加地图容器

<div id="map" style="width:800px;height:500px;"></div>

3、初始化地图并添加聚合

// 在线地图聚合
    var map = new BMap.Map('map');
    var poi = new BMap.Point(112.53, 37.87);
    map.enableScrollWheelZoom();
    map.centerAndZoom(poi, 1);
    //添加比例尺
    map.addControl(new BMap.ScaleControl());
    //初始化打点数据
    // var markers=[

    // ];
    var MAX = 300;
    var markers = [];
    var pt = null;
    var i = 0;
    for (; i < MAX; i++) {
    pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
    markers.push(new BMap.Marker(pt));
    }
    //初始化点聚合
    console.log("markers",markers)
    var markerClusterer=new BMapLib.MarkerClusterer(map, {markers:markers});
    
    //添加聚合点
    markerClusterer.addMarkers(markers)
    console.log(markerClusterer)