急！百度地图点聚合按区域分组怎么实现？？

J_Vernon 2016-04-14 10:45:19

...全文

3925 4 打赏收藏举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

一个不靠谱的程序员 2017-02-17

打赏
举报

http://blog.csdn.net/u013705066/article/details/55511430 可以自定义label 参照这个

qq_22383915 2017-01-13

打赏
举报

你这个实现了没啊，点聚合没发自定义label啊

liusaint1992 2016-04-14

打赏
举报

楼主，我分析了一下你的需求。要做你说的聚合分组是比较容易的。
代码如下：





<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

	<style type="text/css">

		body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}

		#allmap{width:100%;height:500px;}

		p{margin-left:5px; font-size:14px;}

	</style>

	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YWdGplhYjUGQ3GtpKNeuTM2S"></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>

	<title>点聚合</title>

</head>

<body>

	<div id="allmap"></div>

	<p>缩放地图，查看点聚合效果</p>

</body>

</html>

<script type="text/javascript">

	// 百度地图API功能

	var map = new BMap.Map("allmap");

	map.centerAndZoom(new BMap.Point(116.404, 39.915), 4);

	map.enableScrollWheelZoom();



	var MAX = 10;

	var markers = [];

	var pt = null;

	var i = 0;







	var markersA = [];



	for (i=0; i < MAX; i++) {

	   pt = new BMap.Point(Math.random() * 5 + 75, Math.random() * 10 + 21);

	   markersA.push(new BMap.Marker(pt));

	}

	var markersB = [];



	for (i=0; i < MAX; i++) {

	   pt = new BMap.Point(Math.random() * 5 + 80, Math.random() * 10 + 21);

	   markersB.push(new BMap.Marker(pt));

	}

	var markersC = [];



	for (i=0; i < MAX; i++) {

	   pt = new BMap.Point(Math.random() * 5 + 85, Math.random() * 10 + 21);

	   markersC.push(new BMap.Marker(pt));

	}



var markerClustererA = new BMapLib.MarkerClusterer(map, {markers:markersA});

var markerClustererB = new BMapLib.MarkerClusterer(map, {markers:markersB});

var markerClustererC = new BMapLib.MarkerClusterer(map, {markers:markersC});



//下面是对照组，注释掉上面三行，使用下面两行，可以看到对照差别。

//var  markers = markersA.concat(markersB,markersC);

// var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});

</script>

按上面的需求可以实现三组聚合。互不相关。不过我没有找到修改聚合点样式的API。

然后去看了一下你给的网址。发现它的实现并不是用的聚合物这种方式。

如图，它是用的 BMapLabel。 Label的灵活性就比较大。可以有很多自定义的内容了。可以看到。它为之还专门写了样式。楼主不熟悉的话可以先去熟悉一下百度地图的 label 相关API的使用。

然后进入地图相关的 js 。 http://static.wkzf.com/web_fe/js/map.js
它这个js是压缩过的。不是很容易看明白。不过可以了解个大概。

先用浏览器调试工具格式化一下代码。然后复制到我们的编辑器中来看。搜索它这个label中自定义的这个叫 lv0 的 class。
它在这样一个方法中

那么到这里我们就可以猜测它的实现方式。
监测地图显示级别的变化。显示级别变化的时候。清除地图上所有的覆盖物。然后用ajax后台读取新的显示级别所需要的数据。再用这些数据显示新的覆盖物。

然后我们再监测一下它的ajax请求。

页面进入的时候。ajax获取了这些大区的数据。显示label。

另外我们监测到，鼠标移动到label上的时候，还会ajax加载label对应区的边界坐标数组来显示行政区域。

然后我们放大地图。一直到大的label消失，开始显示小的label。

我们监测到这个时候它又用ajax加载了小地方的数据。用来重新显示label。

简单讲就是它不是用的聚合点的方式来实现。具体的实现楼主可以自己去琢磨琢磨label的用法。以及后台数据的组织。看一看它这个js和css源码。
能力有限，希望能帮到楼主一点。
之前写过几篇百度地图API的小文章，楼主也可以看一看，交流交流。
http://blog.csdn.net/liusaint1992/article/category/5985931