vue 使用百度地图以及地图样式、绘制 点、点聚合和多边形区域、自定义点样式、聚合样式等

index.html 引入百度地图api：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的的密钥">

引入样式文件：我在官网上下载的样式文件，可以自定义

这个样式文件放在public文件夹下面的json文件夹里

  <script type="text/javascript" src="json/custom_map_config.json"></script>

应用点聚合工具开源库的文件：

  <script src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
  <script src="http://api.map.baidu.com/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;
          //添加marker
        addMarkerCluser(that.cluster[i]._center)
        }


        // 标记自定义marker
        function 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的label
          let 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地图，详情可见：

https://blog.csdn.net/weixin_54106595/article/details/123796644