百度地图点聚合填坑指南
2017-07-05 本文已影响494人
angkee
点聚合 (MarkerClusterer 标记聚合器)用来解决加载大量点要素到地图上产生覆盖现象的问题,并提高性能。
点聚合的实现原理是按照以某点为中心的正方形作为区域,把此区域的点聚合在一个点上,并随着地图比例尺改变此点区域大小,同时改变聚合点的数量。
百度地图点聚合.png在实际项目开发中,我遇到了点聚合的一个难题。** 如何点击聚合点,显示自定义信息窗口?** Google 了半天也没有找到答案,也分析了点聚合的源码,但是如果直接在源码上修改,时间成本很高,最终一位同事给出了好的建议:我们只需要点聚合后的数据,拿到数据之后自己去标注这个 Marker. 听完之后,豁然开朗。Good Idea!
先上一张效果图!
点聚合.png
项目地址:https://github.com/todayqq/MarkerClusterer
点击预览:https://todayqq.github.io/MarkerClusterer/
核心代码示例:
var datas = [{
'localtion': '120.585239,31.298881'
}, {
'localtion': '120.585239,31.298881'
}, {
'localtion': '120.585239,31.298881'
}, {
'localtion': '120.585239,31.298881'
}, {
'localtion': '120.585239,31.298881'
}]
var markers = [];
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
var localtion = data.localtion.split(',');
var m = new BMap.Marker(new BMap.Point(localtion[0], localtion[1]));
m.data = data;
markers.push(m);
}
markerClustersPoint(markers);
//地图缩放重新计算聚合点
map.addEventListener("zoomend",function(){
markerClustersPoint(markers);
});
function markerClustersPoint(markers) {
var markerClusterer = new BMapLib.MarkerClusterer(map, {
markers: markers,
minClusterSize: 3, //最小的聚合数量,小于该数量的不能成为一个聚合,默认为2
styles: [{
url: 'img/info.png',
size: new BMap.Size(0, 0)
}]
});
// console.log(markerClusterer)
// 拿到所有的聚合点
var mk = markerClusterer._clusters;
var oldmk = [];
for (var i = 0; i < mk.length; i++) {
//小于3个marker不再进行标注
var mConut = mk[i]._markers.length;
if (3 > mConut) continue;
var options = [];
oldmk.push(addMarker(mk[i]._center));
}
}
//标记marker,显示infowindow
function addMarker(point){
var marker = new BMap.Marker(point, {
icon: new BMap.Symbol(BMap_Symbol_SHAPE_CIRCLE, {
scale: 10,
strokeWeight: 1,
strokeColor: 'white',
fillColor: 'red',
fillOpacity: 0.99
})
});
var info = [
"<div class='infotip'>",
"<div class='circle'><span style='background-color:blue'>",
60 ,
"</span></div>",
"<div class='msg'><span class='title'>人数:</span>"+ 10 + "<br/><span class='title'>提示:</span>" + 'this is a test' +"</div><span class='arrows'></span>" ,
"</div>",
].join('');
var infoWindow = new BMap.InfoWindow(info, {
maxWidth: 100,
maxHeight: 50
});
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
map.addOverlay(marker);
return marker;
}
这份代码示例中有自定义覆盖物,自定义地图控件,具体代码我就不再标注了,代码中都能看的到。另外还有地图的小技巧分享给大家。
不想看到地图中地铁、公路等信息,如何修改地图样式呢?
- 自定义地图样式在线地址: http://developer.baidu.com/map/custom/
隐藏百度地图 Logo, 添加这段 Css 即可
.anchorBL a img{
display: none;
}
.anchorBL span span{
display: none;
}
如果大家还想完成一些示例 Demo 中没有的,顺便可以去百度地图的扩展库中找一找。
觉得有用是不是该点赞呢?