百度地图标记聚合函数,解决聚合函数多点(20000)卡顿问题

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

猜你喜欢

转载自blog.csdn.net/pz641/article/details/87630283