百度点聚合用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能。

http://api.map.baidu.com/library/MarkerClusterer/1.2/docs/symbols/BMapLib.MarkerClusterer.html

最基本的实现（在此两个按钮的功能没有实现）：

<!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:80%;}

		#r-result{width:100%;}

	</style>

	<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>

	<title>点聚合</title>

</head>

<body>

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

	<div id="r-result">

		<input type="button" onclick="add_overlay();" value="添加点聚合" />

		<input type="button" onclick="remove_overlay();" value="重新生成点聚合" />

	</div>

</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 markerClusterer = null;

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

		var pt = new BMap.Point(Math.random()*40+85, Math.random()*30+21);

		var marker = new BMap.Marker(pt);

		map.addOverlay(marker);

		markers.push(marker);

	}

	//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。

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

</script>

实现两个按钮的功能，用于添加点聚合，和删除点聚合并重新加载新的点

<!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:80%;}

		#r-result{width:100%;}

	</style>

	<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>

	<title>点聚合</title>

</head>

<body>

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

	<div id="r-result">

		<input type="button" onclick="add_overlay();" value="添加点聚合" />

		<input type="button" onclick="remove_overlay();" value="重新生成点聚合" />

	</div>

</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 markerClusterer = null;

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

		var pt = new BMap.Point(Math.random()*40+85, Math.random()*30+21);

		var marker = new BMap.Marker(pt);

		map.addOverlay(marker);

		markers.push(marker);

	}

	function add_overlay(){

		//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。

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

	}

	function remove_overlay(){

		for(var i=0; i<4; i++){

			map.removeOverlay(markers[i]);

		}

		var markers1 = markers.slice(4,markers.length);

		markerClusterer.clearMarkers();			//此步骤需要

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

	}

</script>

百度地图API 重新生成点聚合的功能的更多相关文章

  1. 百度地图API 批量添加 带检索功能的信息窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 百度地图API的自动定位和搜索功能（移动端）

    近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...

  3. 吐槽贴：百度地图 api 封装 的实用功能 [源码下载]

    ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...

  4. 深入浅出百度地图API开发系列（3）：模块化设计

    在前面两张简单介绍了百度地图API的基础知识和使用之后,我们来分析一下百度地图API的基本架构,了解一下基本架构可以帮助我们更清晰的了解API的功能和调用过程,也就可以帮助我们在实际开发中可以更方便的 ...

  5. 百度地图API功能集锦

    1.点个数太多导致加载缓慢的解决. 2.可视化区域内加载的解决. 3.自定义信息窗口解决. 4.区域/板块/商圈等的绘制功能解决. 基本包含了用到百度地图API会使用到的大部分常规性场景.(聚合点功能 ...

  6. 百度地图API多个点聚合时，标注添加的标签label地图刷新就丢失的问题解决

    当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合A ...

  7. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

  8. 【百度地图API】除夕夜，大家一起来赶走“夕”——删除标注功能

    原文:[百度地图API]除夕夜,大家一起来赶走"夕"--删除标注功能 任务描述: 农历12月31日是中国传统的节日——除夕.你知道除夕是怎么来的麼? “夕”在中国古代神话中,可是一 ...

  9. 【百度地图API】情人节求爱大作战——添加标注功能

    原文:[百度地图API]情人节求爱大作战--添加标注功能 任务描述: 2月2日是除夕,2月14立马来!即将到来的情人节,你想送TA一份什么礼物呢? 不如,在你们居住的地方,画个大大的桃心,表达你对TA ...

随机推荐

  1. 基于laravel4.2的相关架构设计

    项目组不久前引进了laravel框架,本人参与了laravel的调研和项目架构设计.个人认为项目架构中基于laravel的有些设计还是比较实用和有借鉴性的,现将一些设计分享给大家,希望能和大家共同学习 ...

  2. 关于svn获取获取文件时 Unable to connect to a repository at URL"https://..."执行上下文错误：参数错误

    错误提示: 下面的六种解决方案都未能解决: 1.不提示输入用户名和密码,不管重装多少次都一样. 2.TortoiseSVN的setting->Saved Data->Authenticat ...

  3. 开始Swift之旅 - HelloWorld

    //: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...

  4. Java基础--多线程的方方面面

    1,什么是线程?线程和进程的区别是什么? 2,什么是多线程?为什么设计多线程? 3,Java种多线程的实现方式是什么?有什么区别? 4,线程的状态控制有哪些方法? 5,线程安全.死锁和生产者--消费者 ...

  5. php小知识点

    1.字符串可以里面的字符可以像数组一样访问,比如$s = "123";$s[1]就等于2,如果字符串为中文则会乱码,需要使用mb_substr进行截取: 2.php中的单引号(' ...

  6. Java简介(2)-基本概念

    1.抽象类:规定一个或多个抽象方法的类别本身必须定义为abstract,抽象类只是用来派生子类,而不能用它来创建对象 2.final类:又称“最终类”,它只能用来创建对象,而不能被继承,与抽象类刚好相 ...

  7. JSON基础知识总结

    JSON基础 一.JSON简介 JSON,全称“JavaScript Object Notation(JavaScript对象表示法)”,起源于JavaScript的对象和数组.JSON,说白了就是J ...

  8. Llinux-apache安装

    第四章  构建LAMP网站服务平台 实验报告 1.安装apache服务器软件及相关组件 查看系统中是否安装apache服务相关的软件包: [root@www /]# rpm -qa | grep ht ...

  9. Python自动化运维之13、异常处理及反射(__import__,getattr,hasattr,setattr)

    一.异常处理 python异常: python的运行时错误称作异常 (1)语法错误:软件的结构上有错误而导致不能被解释器解释或不能被编译器编译 (2)逻辑错误:由于不完整或不合法的输入所致,也可能是逻 ...

  10. python -i filename

    今天学习的时候看见python -i filaname 这个命令,书上说使用这个命令可以去执行filename文件中的代码.但是今天在使用的时候却一直报错,经过多次测试才把问题解决. 原来这个命令是不 ...