# baiduMapClustersMarker

**Repository Path**: q111211/baiduMapClustersMarker

## Basic Information

- **Project Name**: baiduMapClustersMarker
- **Description**: 这是一个百度地图自定义聚合样式和图层控制拓展方法的API
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 5
- **Created**: 2021-06-02
- **Last Updated**: 2021-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# baiduMapClustersMarker

#### 介绍
这是一个百度地图自定义聚合样式和图层控制拓展方法的API。 <br />>
在百度官方版本的基础上拓展了自定义方法，具体见下方说明。

#### 拓展方法说明
**MarkerClusterer.js**
- 增加属性 <br />
  `type` {Number} 自定义类型，用于方便控制隐藏和显示 <br />
  `name` {String} 自定资源名称，用于方便控制隐藏和显示 <br />
  `markerControl` {Boolean} 是否需要控制maker显示/隐藏，需要控制maker会默认被隐藏，否则直接显示

- 拓展方法 <br />
  `addLabel()` // 对于单个点 添加自定义label <br />
  `addCustomizeMarker()` // 对于单个点 添加自定义marker

**TextIconOverlay.js**
 - 增加属性 <br />
  `type` {Number} type 表示资源类型

- 修改属性 <br />
  `text` 由{String}改为{Json Object} // 表示该覆盖物显示的文字信息

- 拓展方法 <br />
  `_updateClassName()` // 更新覆盖物的类名
  

#### 使用说明
- 引入资源 <br />
 ```js
 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
 <script type="text/javascript" src="TextIconOverlay.js"></script>
<script type="text/javascript" src="MarkerClusterer.js"></script>
 ```
 Html部分
 ```html
 <!-- 地图容器 -->
 <div id='map'></div>
 ```
Js部分 (代码基于Vue)
```js
// 定义地图
var map;

// 初始化百度地图
baiduMapInit: function() {
    var self = this;
    // 百度地图API功能
    map = new BMap.Map(baidumapOptions.mapDiv,{
        enableMapClick: false, // 禁用景点，场所等点击事件
        minZoom: baidumapOptions.zoom
    });    // 创建Map实例
    map.centerAndZoom(new BMap.Point(baidumapOptions.center[1],baidumapOptions.center[0]), baidumapOptions.zoom);  // 初始化地图,设置中心点坐标和地图级别
    map.setMapStyle({ style: 'midnight' });
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
},
// 添加聚合点
createClustersMarker: function(markers,type,name){
    var markerClusterer = new BMapLib.MarkerClusterer(map, {
        markers: markers,
        minClusterSize: 3, //最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
        type: type, // 资源类型
        name: name, // 资源名称
        markerControl: false, // 是否控制marker
        styles: [{
            textColor: '#fff',
            backgroundColor: '#0080ff',
            size: new BMap.Size(26, 26)
        }]
    });
},
// 获取警力(警员/警车/移动警务)
getPolice: function(){
    var self = this;
    
    // ... 省略无关代码

    var policeMan = res.data.policeMan;

    // 警力 [31|警员] - 地图点聚合需要
    if(policeMan.length){
        var markers = [];
        var type = '31';
        var name = 'jy';

        policeMan.map(function(item){
            if(item.jd && item.wd){
                var point = new BMap.Point(item.jd, item.wd);
                var marker = new BMap.Marker(point);
                
                // marker携带自定义参数
                marker.customData = {
                    "type": type,
                    "name": name,
                    "jd": item.jd,
                    "wd": item.wd,
                    "bmmc": item.bmmc,
                    "xm": item.xm,
                }

                marker.addEventListener('click', function(e){
                    // 绑定点击事件
                });

                markers.push(marker);
            } else{
                console.log('当前警员没有经纬度：', item);
            }
        });

        // 给地图添加聚合点
        self.createClustersMarker(markers,type,name);
    }

    // ... 省略无关代码

},
// 地图缩放、拖拽之后重新设置地图图层状态
chechMapLayerStatus(){
    // 此处为控制marker显示/隐藏的方法，具体可参考以下示例，
    if(item.type == 'xxbz'){ // 信息标识
        if(item.checked){
            $('.map .facility-xxbz-point').show();
            $('.map .map-xxbz-cluster').show();
        } else{
            $('.map .facility-xxbz-point').hide();
            $('.map .map-xxbz-cluster').hide();
        }
    }

    // 说明,
    // xxbz 为传递到js中的name属性
},
```