1.首先要包含一些JS库,还有自己申请的百度地图AK
(申请AK流程:https://jingyan.baidu.com/article/e73e26c0b5b75124adb6a786.html ,需要注册百度账号,不再赘述)
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的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>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/data/points-sample-data.js"></script>
2.构建地图实例和选取中心位置
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
3.构建标记数组和标记函数
//创建标记数组
var markers = [];
//标记聚合函数 输入经纬度和名称,标记
function bindPoint(longti,lati,name) {
// map.clearOverlays();//清空原来的标注
var pt = null;
//创建点
pt = new BMap.Point(longti, lati);
//创建标记
var marker = new BMap.Marker(pt);
//定义文本内容
var content = name + "<br/><br/>经度:" + longti + "<br/>纬度:" + lati;
//添加显示文本
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
//添加鼠标放置事件
marker.addEventListener("mouseover", function () { this.openInfoWindow(infoWindow); });
//添加点击事件
marker.addEventListener("click", function () { alert(name)});
//将标记放入标记数组
markers.push(marker);
}
4.调用API聚合函数将标记数组显示在地图上
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
5.调用标记函数
bindPoint(116.493895,29.859667,"大光村" );
bindPoint(121.386816,29.859667,"李广村" );
bindPoint(121.286816,29.859667,"李广村" );
bindPoint(121.186816,29.859667,"李广村" );
bindPoint(121.086816,29.859667,"李广村" );
6.成功
7.速度问题:这样做,对于1000以下标记是不卡的,但是2000以上卡的不能动,所以楼主从网上找了加速的js
引入这个js之后,50000左右会有卡顿感觉,网址:
https://download.csdn.net/download/pz641/10907046
<script src="./MarkerClusterer_min.js"></script>
8.以下是源码
<!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=你的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>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/data/points-sample-data.js"></script>
<script src="./MarkerClusterer_min.js"></script>
<title>点聚合</title>
</head>
<body>
<div id="allmap"></div>
<p>缩放地图,查看点聚合效果</p>
</body>
</html>
<script type="text/javascript">
//生成随机数
function randomNum(minNum,maxNum){
switch(arguments.length){
case 1:
return (Math.random()*minNum).toFixed(6);
break;
case 2:
return (Math.random()*(maxNum-minNum)+minNum).toFixed(6);
break;
default:
return 0;
break;
}
}
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
//启用滑轮控制地图大小
map.enableScrollWheelZoom();
//创建标记数组
var markers = [];
// 输入经纬度和名称,标记
function bindPoint(longti,lati,name) {
// map.clearOverlays();//清空原来的标注
var pt = null;
//创建点
pt = new BMap.Point(longti, lati);
//创建标记
var marker = new BMap.Marker(pt);
//定义文本内容
var content = name + "<br/><br/>经度:" + longti + "<br/>纬度:" + lati;
//添加显示文本
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
//添加鼠标放置事件
marker.addEventListener("mouseover", function () { this.openInfoWindow(infoWindow); });
//添加点击事件
marker.addEventListener("click", function () { alert(name)});
//将标记放入标记数组
markers.push(marker);
}
bindPoint(116.493895,29.859667,"大光村" );
bindPoint(121.386816,29.859667,"李广村" );
bindPoint(121.286816,29.859667,"李广村" );
bindPoint(121.186816,29.859667,"李广村" );
bindPoint(121.086816,29.859667,"李广村" );
var lon;
var lat;
var randomPoint = 50000;
//循环生成randomPoint个点
for (var k = 0; k < randomPoint; k++)
{
lon = randomNum(115.1,115.3);
lat = randomNum(35.7,36.0);
console.log(lon+", "+ lat);
bindPoint(lon,lat,k);
}
//调用API聚合函数将标记数组显示在地图上
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
console.log(markerClusterer);
</script>
基本上算是完美解决吧(虽然是黑盒解决),一些格式懒得调了
分割线-----------------------------------------------------------------------------------
分割线-----------------------------------------------------------------------------------
分割线-----------------------------------------------------------------------------------
分割线-----------------------------------------------------------------------------------
本着厚道的原则,上面的加速js可以通过百度网盘下载,
博主找了好久好不容易才找到,分多的可以给我送点分,谢谢
链接:https://pan.baidu.com/s/14wQzuyoQmUnKgIJTOPUdug
提取码:gnyd