当地图上标点过多的时候,我们需要用用到地图组件聚合marker,具体可参照官方文档:http://lbs.tianditu.gov.cn/api/js4.0/examples.html,在地图组件中找到聚合marker,复制代码即可,效果如下
但是有个问题,当我们根据条件更新地图标点的时候,明明看到的数据已经发生改变,但是在放大或者缩小地图的时候,上一次的数据还是会复现出来,这是因为聚合点和标记点不太一样,所以删除或者覆盖的方法都是不生效的,必须使用聚合点自己的删除方法clearMarkers(),如下
var map;
var markers;
var arrayObj = new Array();
function onLoad() {
map = new T.Map('mapDiv', {
attributionControl: false,
inertia: false
});
map.centerAndZoom(new T.LngLat(116.40969, 37.43997405227057), 3);
for (var i = 0; i < 500; i++) {
var marker = new T.Marker(new T.LngLat(Math.random() * 40 + 85, Math.random() * 30 + 21), { title: i });
arrayObj.push(marker);
}
// 聚合点
markers = new T.MarkerClusterer(map, { markers: arrayObj });
}
// 清除聚合点
function clear() {
markers.clearMarkers(arrayObj);
markers = null
}