本文介绍了百度地图JavaScript API，展示了如何利用MarkerClusterer解决大量覆盖物导致的地图卡顿问题，提供了一个实现点聚合的步骤和代码示例。
百度地图点聚合解决方案
本篇主要记录相关地图的java script api版本。
介绍说明
百度地图历史简介
2005年百度地图诞生，百度地图是百度提供的一项网络地图搜索服务，其数据来源于mapbar公司，最初只支持十个城市，仅能查询路线等基础功能，使用起来专业性要求高。
在2005年-2009年，百度解决了地图数据准确性和功能丰富性问题，例如增加三维视图，让人们通过电脑使用地图更简单，并开始支持更多城市。据报道记录，截至2010年上半年，百度地图覆盖用户市场份额超过55%，做到行业第一。
2010中国移动互联网迎来爆发期，百度正式启动了移动战略，这算是百度地图的第二阶段。
百度地图WM、Nokia、iOS、Android等版本路线上线，与此同时，百度地图率先走开放路线，推出可API并与新浪乐居等明星公司合作推出多种图层，并提供商家标注等UGC功能，在春运等关键时刻为用户提供专题地图服务。
2010年到2013年这三年，伴随着百度移动转型，百度地图与之一起完全移动转型和开放之路，成为最大的地图开放平台，开放平台每天响应定位需求超过230亿次，POI(兴趣点)总数已达到4000万，其中生活类POI超过2000万。
百度多次对外宣称其移动转型成功的标志是：移动三大入口成型：搜索、地图和App分发。
在这三年，百度地图还补足了卫星服务、街景服务，并收购了具有甲级导航资质的长地万方，做到人有我有。
2013-2014年百度启动连接人与服务战略，百度地图成为这一战略重要支撑，2014年开始平台化，从数据信息的映射者，成为生活服务的连接者。
现在百度地图上的POI点70%是生活服务类，其已接入用车、外卖、餐饮、酒店、电影院诸多生活服务，用户可一键获取，百度地图想要成为人们探索世界之后，获取实体服务的入口。与此同时，百度地图开始探索空间大数据的价值，提供多种LBS行业服务、社会公共分析服务、商家营销服务等，成为最大的空间大数据服务供应商。
Java Script API介绍
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
该套API免费对外开放,自v1.5版本起，需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制,V2.0及以上版本支持https协议。
百度地图JavaScript API 地址：http://lbsyun.baidu.com/index.php?title=jspopular
API 里大概有30多个类（类参考）,通过API 可以轻松的获取百度服务和数据,构建功能丰富、交互性强的地图应用程序.
获取key的方式非常简单，开发者自己申请相关的key便可用于开发测试，打开刚才我提供的api地址，选择相关api，就可以看到获取key的菜单，跟着说明一步一步来就OK了，没有什么难度。
示例DEMO
<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
以上示例来自百度地图api官网，根据示例我们可以很轻松的上手，在进行相关开发前需要具备一定的js，html基础。
提出问题
初次使用百度地图，应用其实很简单，填写坐标数据，在地图上创建覆盖物，
如下：
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
marker是覆盖物类，point是坐标类。
当覆盖物达到一定数量级，打开地图发现全部都是密密麻麻的覆盖物，而且由于绘制量大，也会导致页面卡顿，操作不够灵活，降低用户的使用体验，如何解决这种问题呢。
使用百度地图必须了解相关API文档，百度地图AIP文档全面，还有活生生的示例，可以动态编辑运行，非常强大。
解决方案：MarkerClusterer
百度地图提供了MarkerClusterer，这是个点聚合的类库，通过这个类库可以将大量的标志物分组显示。
代码如下：
<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KEY"></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="MarkerClusterer.js"></script>
<title>点聚合</title>
</head>
<body>
<div>
<input type="button" onclick="add()" value="add聚合"/>
</div>
<div id="allmap"></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 n=0;
var markarr=new Array();
var markerClusterer=null;
myMarkerClusterer();
function cz(){
markerClusterer._redraw();
map.addOverlay(markerClusterer);
}
function add(){
if(n==10){
markerClusterer.clearMarkers();
n=0;
}
var o={ title: "名称：金陵饭店", point: "118.789287,32.048784", address: "南京", tel: "12306" };
var point = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21); //循环生成新的地图点
var myIcon = new BMap.Icon("1.png", new BMap.Size(32, 32));
var marker = new BMap.Marker(point,{icon:myIcon}); //按照地图点坐标生成标记
var label = new BMap.Label(o.title+n, { offset: new window.BMap.Size(20, -10) });
label.enableMassClear = true;
marker.setLabel(label);
var info = new BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + o.title + "</br>地址：" + o.address + "</br> 电话：" + o.tel + "</br></p>"); // 创建信息窗口对象
marker.addEventListener('click', function () {
this.openInfoWindow(info);
});
markerClusterer.addMarker(marker);
n++;
}
function myMarkerClusterer() {
n++;
var markerArr = [];
var point = new Array(); //存放标注点经纬信息的数组
var marker = new Array(); //存放标注点对象的数组
var info = new Array(); //存放提示信息窗口对象的数组
var label = new Array();
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].point.split(",")[0]; //
var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point[i] = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21); //循环生成新的地图点
var myIcon = new BMap.Icon("1.png", new BMap.Size(32, 32));
marker[i] = new BMap.Marker(point[i],{icon:myIcon}); //按照地图点坐标生成标记
map.addOverlay(marker[i]);
//marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
label[i] = new BMap.Label(markerArr[i].title+n, { offset: new window.BMap.Size(20, -10) });
label[i].enableMassClear = true;
marker[i].setLabel(label[i]);
info[i] = new BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].title + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>"); // 创建信息窗口对象
markarr.push(marker[i]);
}
for (var i = 0; i < markarr.length; i++) {
(function () {
var index = i;
/*markarr[i].addEventListener('click', function () {
this.openInfoWindow(info[index]);
});*/
})();
}
//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
markerClusterer = new BMapLib.MarkerClusterer(map, { markers: null });
}
</script>
创建标志物以及标志物的相关style，lable之后，将其加入数组，形成集合，再给聚合类调用即可。
整体思路可以分为以下几步：
第一步：实例化地图：
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 4);
map.enableScrollWheelZoom();
第二步：实例化聚合对象：
var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: null });
实例化了聚合对象之后，默认给数组集合空值是因为我们需要手动触发点的集合，所以markers是null，如果你一开始就需要展示聚合的话这就需要填写相关数据了。
第三步：写聚合点调用事件
var o={ title: "名称：金陵饭店", point: "118.789287,32.048784", address: "南京", tel: "12306" };
var point = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21); //循环生成新的坐标点
var myIcon = new BMap.Icon("1.png", new BMap.Size(32, 32)); //自定义标志物
var marker = new BMap.Marker(point,{icon:myIcon}); //按照地图点坐标生成标记
var label = new BMap.Label(o.title+n, { offset: new window.BMap.Size(20, -10) });//添加label
label.enableMassClear = true;
marker.setLabel(label);
var info = new BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + o.title + "</br>地址：" + o.address + "</br> 电话：" + o.tel + "</br></p>"); // 创建信息窗口对象
marker.addEventListener('click', function () {//添加标志物点击事件
this.openInfoWindow(info);
});
markerClusterer.addMarker(marker);//显示聚合的标志物
完成以上三步，我们就写完了这个聚合的示例。
扫一扫
1174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
