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

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. HUD 2089 位数dp

    /* 做的不多的位数dp 暴力的话 不知道多少组数据 会T 所以写dp 思路就和数学课本上那种“不超过xxx的x位偶数有几个” 这里可以类似的维护一个前缀和模样的东西(但又不同于前缀和) 状态:f[i ...

  2. meta标签的含义

    <meta http-equiv="imagetoolbar" content="false" /> 定是否显示图片工具栏,当为false代表不显示 ...

  3. lucene建立索引的过程

    建立索引过程 用户提交数据=>solr建立索引=>调用lucene包建立索引 官方建立索引和查询索引的例子如下: http://lucene.apache.org/core/4_10_3/ ...

  4. ASPNET5应用程序启动

    1. 启动类 在asp.net5当中,Startup类提供应用程序的入口,对所有应用程序是必须的.争对特定环境的配置的starup class和方法也是有可能的, 但是,不管怎样, 一个Startup ...

  5. java中的IO一

    一.IO操作的目标 IO的流向 二.IO的分类方法 1.第一种分法:输入流.输出流 2.第二种分法:字节流.字符流 3.第三种分法:节点流.处理流 三.IO当中的核心类 核心类中的核心方法 Input ...

  6. Cognos开发报表如何隐藏列

    情景:当报表必须用到一列的存在,但是不需要显示该列的时候,我们就需要隐藏该列了,所有对象. 如何隐藏呢? 步骤1:选择要隐藏列的列标题和列正文两个部分 步骤2:分别找到左侧属性的条件样式,新建条件样式 ...

  7. [转] 详细整理：UITableView优化技巧

      原文:http://www.cocoachina.com/ios/20150602/11968.html   最近在微博上看到一个很好的开源项目VVeboTableViewDemo,是关于如何优化 ...

  8. NPM环境搭建

    1. NPM全局路径:配置npm包的安装位置,在你的用户文件夹下,新建.npmrc文件:cache=D:\NodeJs\nvm\npm-cache 表示缓存文件夹 prefix=D:\NodeJs\n ...

  9. 设置Imindmap默认字体

    创建一个新的字体样式 根据如下步骤创建新的字体样式: 1.打开一个mindmap,选中工具栏上的 [样式][Styles ]. 2.选择 Font > Create New Font Optio ...

  10. 【USACO 1.5.2】回文质数

    [题目描述] 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围[a,b](5 <= a < b <= 100,0 ...