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

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. Vijos P1325桐桐的糖果计划（有向图双连通分量）

    /*重边不能删 不能删 不能删...*/ #include<iostream> #include<cstdio> #include<cstring> #define ...

  2. HighCharts基本用法

    var options={ chart: {type: 'column',renderTo: 'ChartDesigner1'},//type :图表类型(柱状图,饼状图),renderTo :指向页 ...

  3. ASP.NET MVC 几种 Filter 的执行过程源码解析

    一.前言 之前也阅读过MVC的源码,并了解过各个模块的运行原理和执行过程,但都没有形成文章(所以也忘得特别快),总感觉分析源码是大神的工作,而且很多 人觉得平时根本不需要知道这些,会用就行了.其实阅读 ...

  4. C# 汉字的字符串截取指定字节的长度

    int index = 0;            int setCharCount = 74;            string str1 = "三星 SCH-I829 电信3G手机(优 ...

  5. Python中小中花括号的区别

    Python主要有三种数据类型:字典.列表.元组.其分别由花括号.中括号.小括号表示. 如: 字典:dic={'a':12, 'b':34} 列表:list=[1,2,3,4] 元组:tup=(1,2 ...

  6. C语言的运行机制

    目的:通过分析c语言转换成汇编代码后的执行过程对汇编语言和X86构架有一个初步认识 实验代码 1 #include <stdio.h> 2 3 int g(int x) 4 { 5 ret ...

  7. C# static 干货全解析

    讲解顺序 背景 静态字段 静态函数 静态方法 疑问解答 背景 static来源 在编写类的时候,有时候需要类里面的某个成员具有唯一性,也就是,对所有的对象都保持只有一个的状态.比如创建个人信息,我们都 ...

  8. 【USACO 1.3.3】回文串

    [題目描述] 据说如果你给无限只母牛和无限台巨型便携式电脑(有非常大的键盘),那么母牛们会制造出世上最棒的回文.你的工作就是去寻找这些牛制造的奇观(最棒的回文). 在寻找回文时不用理睬那些标点符号.空 ...

  9. underscorejs-map学习

    2.2 map 2.2.1 语法: _.map(list, iteratee, [context]) 2.2.2 说明: 对集合的每个成员依次进行某种操作,将返回的值依次存入一个新的数组.接收3个参数 ...

  10. js学习笔记之：数组（一）

    今天来学习一下js中的一维数组.二维数组,以及数组的赋值.遍历.删除.排序等操作:    1 数组的声明 js提供了一个数组对象Array,默认是一维数组,其申明的方法如下: var aCity = ...