百度地图点聚合样式修改(BMapLib.MarkerClusterer)

找了很久都没人贴过这个,百度地图里点聚合的图标替换,官方文档也没有直接把这块贴出来,经过几番周折最终还是找到了,先上效果图(这是直接在官方的例子里做的,略丑)

百度地图点聚合样式修改(BMapLib.MarkerClusterer)_第1张图片

实现方面先看看官方怎么说的:

百度地图点聚合样式修改(BMapLib.MarkerClusterer)_第2张图片

然后找到TextIconOverlay:

百度地图点聚合样式修改(BMapLib.MarkerClusterer)_第3张图片

虽然官方是写了怎么做,可以传个数组,这个不明白啊,难不成一个点要对应一个style?不能吧,我只需要所有的点样式一样就行,干嘛要每个点一个样式,最重要的是点聚合是又api自动聚合,我咋知道聚合后是多少个点,这样也没法做到一一对应啊,找了一会儿,找到了一个官方例子,下面是地址:

http://api.map.baidu.com/library/MarkerClusterer/1.2/examples/simple.htm

效果图:

百度地图点聚合样式修改(BMapLib.MarkerClusterer)_第4张图片

按照这个代码,按自己的理解做了修改,得到最上面的图,上代码:

// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
	map.enableScrollWheelZoom();


	var MAX = 10;
	var markers = [];
	var pt = null;
	var i = 0;
	for (; i < MAX; i++) {
	   pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
	   markers.push(new BMap.Marker(pt));
	}
// 重点:下面是样式,因为不懂多个值是干嘛的,只写了一个
  var EXAMPLE_URL = "http://api.map.baidu.com/library/MarkerClusterer/1.2/examples/";
  var myStyles = [{
            url: EXAMPLE_URL + 'images/heart30.png',
            size: new BMap.Size(30, 26),
            opt_anchor: [16, 0],
            textColor: '#fff',
            opt_textSize: 10
        }];
	//最简单的用法,生成一个marker数组,然后调用markerClusterer类即可。
	var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
// 将样式通过setStyles设置即可
// 也可在MarkerClusterer构造函数的第二个参数中加入styles属性,直接将样式写入,两种方式都行
  markerClusterer.setStyles(myStyles);

但是到目前为止还是不懂传入一个数组,其中的对应关系是啥,有知道的请告知

最后再加一句,要使用点聚合的功能,不要忘记在头部引入两个api文档


经过一番研究,猜测样式数组是根据聚合的点的数量来修改样式的

var myStyles = [{
            url: EXAMPLE_URL + 'images/heart30.png',
            size: new BMap.Size(30, 26),
            opt_anchor: [16, 0],
            textColor: '#ff00ff',
            opt_textSize: 10
        }, {
            url: EXAMPLE_URL + 'images/heart40.png',
            size: new BMap.Size(40, 35),
            opt_anchor: [40, 35],
            textColor: '#ff0000',
            opt_textSize: 12
        }, {
            url: EXAMPLE_URL + 'images/heart50.png',
            size: new BMap.Size(50, 44),
            opt_anchor: [32, 0],
            textColor: 'white',
            opt_textSize: 14
        }];

百度地图点聚合样式修改(BMapLib.MarkerClusterer)_第5张图片

百度地图点聚合样式修改(BMapLib.MarkerClusterer)_第6张图片

小于10使用数组第一个样式

大于10小于20使用数组第二个样式

大于20使用第三个样式

仅仅是猜测,因为找不到官方文档。。。

你可能感兴趣的:(js,百度地图)