index.html 引入百度地图api：
<script type="text/javascript" src="https://api./api?v=1.0&&type=webgl&ak=你的的密钥">
引入样式文件：我在官网上下载的样式文件，可以自定义
这个样式文件放在public文件夹下面的json文件夹里
<script type="text/javascript" src="json/custom_map_config.json"></script>
应用点聚合工具开源库的文件：
<script src="http://api./library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script><script src="http://api./library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
在vue单文件中放置容器：
<template><div><div class="allmap" ref="allmap"></div></div></template>
给容器设置样式：
<style lang="scss" scoped>.allmap {height: 600px;width: 800px;margin: auto;background-color: #fff;}</style>
js部分：
mounted() {this.useMap()},methods: {useMap() {let that = this;let map = new BMap.Map(this.$refs.allmap) // 创建Map实例map.centerAndZoom(new window.BMap.Point(106.601039, 29.797674), 11) // 初始化地图,设置中心点坐标和地图级别map.addControl(new window.BMap.MapTypeControl({ // 添加地图类型控件mapTypes: [window.BMAP_NORMAL_MAP,window.BMAP_HYBRID_MAP]}))map.setCurrentCity('北碚') // 设置地图显示的城市 map.enableScrollWheelZoom(true)// 开启鼠标滚轮缩放map.setMapStyle({ styleJson: mapStyle }); // 地图样式// 引入自定义图标 图片并设置样式let imgPath = require('@/assets/img/mapIcon3.png')let myIcon = new window.BMap.Icon(imgPath, new window.BMap.Size(48, 48), {imageOffset: new window.BMap.Size(0, 0, 0) // 设置图片偏移 });let markersArr = [{ lng: 106.310011, lat: 29.870052, name: 'atm', },{ lng: 106.382449, lat: 29.821434, name: 'atm', },{ lng: 106.505481, lat: 29.786334, name: 'atm', },{ lng: 106.51698, lat: 29.881076, name: 'atm', },{ lng: 106.438216, lat: 29.883581, name: 'atm', },{ lng: 106.366352, lat: 29.845496, name: 'atm', },{ lng: 106.300545, lat: 29.841935, name: 'atm', },{ lng: 106.430167, lat: 29.832964, name: 'atm', },{ lng: 106.403146, lat: 29.781318, name: 'atm', },{ lng: 106.429018, lat: 29.736671, name: 'atm', },];let markers = [];//标记聚合函数 输入经纬度和名称markersArr.forEach(item => {map.clearOverlays();//清空原来的标注let pt = null;//创建点pt = new window.BMap.Point(item.lng, item.lat);//创建标记let marker = new window.BMap.Marker(pt, { icon: myIcon });//定义文本内容let content = item.name + "<br/><br/>经度：" + item.lng + "<br/>纬度：" + item.lat;//添加显示文本let infoWindow = new window.BMap.InfoWindow("<p style='font-size:16px;'>" + content + "</p>");//添加鼠标放置事件marker.addEventListener("mouseover", function () {// console.log(1111111111);// map.openInfoWindow(infoWindow);});//添加点击事件marker.addEventListener("click", function () {this.openInfoWindow(infoWindow);});//将标记放入标记数组markers.push(marker);})//地图缩放重新计算聚合点map.addEventListener("zoomend", function () {markerClustersPoint(markers);});markerClustersPoint(markers);//聚合添加方法function markerClustersPoint(markers) {if (that.markerClusterer) {that.markerClusterer.clearMarkers();//清除聚合map.clearOverlays(); // 清除标注}//调用API聚合函数将标记数组显示在地图上// 聚合样式let myStyles = [{url: imgPath,size: new window.BMap.Size(48, 48), // 聚合点大小opt_anchor: [0, 0],textColor: 'rgba(0,0,0,0)',textSize: 16,}];// 实现聚合that.markerClusterer = new window.BMapLib.MarkerClusterer(map, { markers: markers, minClusterSize: 2, });//最小的聚合数量，小于该数量的不能成为一个聚合，默认为2});// 将样式通过setStyles设置即可// 也可在this.markerClusterer构造函数的第二个参数中加入styles属性，直接将样式写入，两种方式都行that.markerClusterer.setStyles(myStyles);// 拿到所有的聚合点//this.markerClusterer中的 _clusters是一个数组，包含了可视范围的所有聚合点 that.cluster = that.markerClusterer._clusters;for (let i = 0; i < that.cluster.length; i++) {//cluster[i]._markers中包含此聚合点的所有marker集合//marker长度小于等于2时不进行聚合效果显示if (that.cluster[i]._markers.length <= 2) {continue}//自定义函数内容，可进行聚合点数据获取操作//拿到聚合点中的marker数量，用于数字显示var cluserMakerSum = that.cluster[i]._markers.length;//添加markeraddMarkerCluser(that.cluster[i]._center)}// 标记自定义markerfunction addMarkerCluser(point) {let markerdef = new window.BMap.Marker(point,{// icon: 设置marker样式icon: new window.BMap.Symbol(window.BMap_Symbol_SHAPE_CIRCLE, {scale: 0,strokeWeight: 0,strokeColor: "rgba(0,0,0,0)",fillColor: "rgba(0,0,0,0)",fillOpacity: 0})});//设置marker的labellet labelTitleCluser = cluserMakerSum;let label = new window.BMap.Label(labelTitleCluser, {offset: new window.BMap.Size(0, -32) // 偏移位置});//设置label样式 聚合的数字显示let styleData = {color: "rgba(255,255,255,1)",fontSize: "16px",backgroundColor: "#F0C92B",border: "1px ",borderRadius: '16px',width: '24px',height: '24px',lineHeight: '24px',textAlign: 'center',}label.setStyle(styleData);markerdef.setLabel(label);map.addOverlay(markerdef);return markerdef;}// 添加多边形区域 beibei 和 jiangbei 是先引入的json文件 从dataV下载的let beibeiArray = beibei.features[0].geometry.coordinates[0][0];let jiangbeiArray = jiangbei.features[0].geometry.coordinates[0][0];// 北碚let mapArr = [];beibeiArray.forEach(element => {let poin = new window.BMap.Point(element[0], element[1])mapArr.push(poin)});var polygon = new window.BMap.Polygon(mapArr, { strokeColor: "#39A0FF", strokeWeight: 2, strokeOpacity: 1, fillColor: "rgba(17, 72, 114,0.5)", });map.addOverlay(polygon);// 江北let beibeimap = [];jiangbeiArray.forEach(ele => {let pon = new window.BMap.Point(ele[0], ele[1])beibeimap.push(pon)})let polygon1 = new window.BMap.Polygon(beibeimap, { strokeColor: "#39A0FF", strokeWeight: 2, strokeOpacity: 1, fillColor: "rgba(17, 72, 114,0.5)", });map.addOverlay(polygon1);}//添加地图平移缩放控件map.addControl(new window.BMap.NavigationControl());//控制地图的最大和最小缩放级别map.setMinZoom(11);map.setMaxZoom(17.5);}}
写的时候直接写BMap会报错，在package.json 文件中加入下面代码即可：
"globals": {"BMap": true}
去掉地图上的默认标记和链接，直接css写：
<style >/* 去掉地图默认标记 */.BMap_cpyCtrl {display: none;}.anchorBL {display: none;}.BMap_noprint {display: none;}.BMap_Marker {display: inline-block;}</style>
效果：
阿里云地址：
DataV.GeoAtlas地理小工具系列
直接选中想要的区域，就可以下载对应的数据啦
这里的json数据还可以用来画echarts地图，详情可见：
/weixin_54106595/article/details/123796644
