百度地图--点聚合 + 弹窗事件
记录每一个小坑、大坑
目前做项目接触到了如百度地图点聚合的需求，老规矩，看文档记笔记。
0. 其它
1. 点聚合
点聚合 （MarkerClusterer 标记聚合器）用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能。
2. 简单实例
- HTML \ CSS
<style>
body, html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}
#allmap {width: 100%;height: 500px;}
p {margin-left: 5px;font-size: 14px;}
/*隐藏百度logo*/
.anchorBL a img{display: none;}
.anchorBL span span{display: none;}
</style>
<body style="min-height: 100%;">
<div id="allmap"></div>
</body>
- JS
- 启用点聚合功能，其中的 data 可以根据需求进行异步获取，得到的数据中应当有横纵坐标
- 可以开启定位，达到每次打开地图快速定位到相关位置
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script>
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,6);
//启用滚轮放大缩小
map.enableScrollWheelZoom(true);
// 相关数据(也可以根据需求异步获取）
// 可以确定的是每条数据应要有横纵坐标
var data = [{"mapy": "32.94584", "mapx": "112.894350", "time": "12:30"},
{"mapy": "33.34683", "mapx": "112.694300", "time": "11:30"},
{"mapy": "33.54702", "mapx": "112.094380", "time": "10:30"},
{"mapy": "33.148780", "mapx": "116.494390", "time": "13:30"}
];
var markers = [];
// 遍历得到的数据
$.each(data, function (i, item) {
// 横纵坐标定点
var point = new BMap.Point(item.mapx, item.mapy);
var marker = new BMap.Marker(point);
// 获取数据
var content = item.time;
// 添加点击事件
//addClickHandler(content, marker);
markers.push(marker);
});
// 根据ip定位
function myFun(result){
var cityName = result.name;
map.setCenter(cityName);
console.log("当前定位城市:"+cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
// 添加点聚合效果
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});
</script>
- 聚合点的样式修改
如果觉得默认样式不好看，或者有特殊的需求，可以自定义点的样式
// 添加点聚合效果
var markerClusterer = new BMapLib.MarkerClusterer(map, {
markers: markers,
//最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
minClusterSize: 2,
styles: [{
// 此处URL不知道能否用本地图片，自己试了一下不能，待解答！
url: 'dist/img/smallred.png',
size: new BMap.Size(0, 0)
}]
});
3. 添加点击事件
正常情况下会需要为每个点添加点击事件，如弹出弹窗显示信息
- 添加点击事件
// 添加点击事件,可在循环数据时调用
function addClickHandler(content, marker) {
marker.addEventListener("click", function (e) {
openInfo(content, e)
}
);
}
- 弹窗
openInfo(content, e)，这里可以传需求的参数；var infoWindow = new BMap.InfoWindow( 拼接数据 , opts);， 这里可以自定义拼接参数；
// 弹窗
var opts = {
width: 270, // 信息窗口宽度
height: 100, // 信息窗口高度
enableMessage: true//设置允许信息窗发送短息
};
// 弹窗点击事件
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
// 创建信息窗口对象
var infoWindow = new BMap.InfoWindow(`<div>自定义内容</div><div>${content}</div>` , opts);
//开启信息窗口
map.openInfoWindow(infoWindow, point);
}
4. 结束
1.更加复杂的需求也没接触到，先整理这么多。
2.期间弹窗部分想结合 layer 来做的，不过失败了，报错是：不是一个正确的节点，layer 是封装好的可能不行。
3.把 layer 组件放在 “BMap.InfoWindow( layer组件 , opts)” 的第一个参数是可以调用的，但是后台报错了，最后还是放弃了这个想法。
