百度地图点聚合

渭水一方

已于 2024-01-06 22:55:03 修改

阅读量595

点赞数 10

文章标签：百度 javascript

于 2024-01-06 22:52:46 首次发布

本文链接：https://blog.csdn.net/weixin_37593409/article/details/135433478

版权

文章讨论了在手机上使用地图应用时，点击标注点信息窗口闪退的问题，并提出了解决方案，包括在电脑上正常操作以及针对大量点加载速度慢的优化建议，如本地化MarkerClusterer库以提高性能。

摘要由CSDN通过智能技术生成

根据网友的进行整理。存在的问题：手机上使用时，点击标注点，信息窗口闪退，电脑上可以。

固定点聚合

完整代码

　　<!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:"微软雅黑";}
　　#allmap{width:100%;height:100%;}
　　p{margin-left:5px; font-size:14px;}
　　</style>
　　<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8hmxKhlglurmsX4SpBKoT13YtELFysZq"></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>
　　</body>
　　</html>
　　<script type="text/javascript">
　　
　　// 百度地图API功能
　　var map = new BMap.Map("allmap");
　　map.centerAndZoom(new BMap.Point(108.720599,34.339295), 13);
　　//启用滑轮控制地图大小
　　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("<div style='height:100px;width:200px;overflow:auto;background:#FFFFCC'>"+content+"</div>");  // 创建信息窗口对象
　　//添加鼠标放置事件
　　marker.addEventListener("mouseover", function () { this.openInfoWindow(infoWindow); });
　　//添加点击事件
　　marker.addEventListener("click", function () { alert(name)});
　　//将标记放入标记数组
　　markers.push(marker);
　　}
　　bindPoint(108.741619,34.350293,"咸阳站" );
　　bindPoint(108.738996,34.349034,"新好望角酒店" );
　　bindPoint(108.736598,34.345368,"凤凰生活广场" );
　　bindPoint(108.733795,34.343736,"咸阳市中心医院" );
　　bindPoint(108.743029,34.344556,"咸阳供电局" );
　　bindPoint(108.731585,34.34092,"咸阳博物馆" );
　　bindPoint(108.736831,34.356358,"西藏民族大学" );　　
　　bindPoint(108.719009,34.356001,"陕西工业职业技术学院" );
　　bindPoint(108.74991,34.322974,"陕西中医药大学" );
　　bindPoint(108.6705,34.339191,"地铁咸阳西站" );
　　bindPoint(108.700827,34.312419,"地铁安谷站" );
　　bindPoint(108.700827,34.312419,"秦都区政府" );
　　bindPoint(108.715487,34.33624,"咸阳市政府" );
　　bindPoint(108.713978,34.334496,"咸阳市体育馆" );
　　bindPoint(108.699983,34.333021,"咸阳市司法局" );
　　bindPoint(108.693138,34.353438,"文咸公园" );

　　//调用API聚合函数将标记数组显示在地图上
　　var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
　　console.log(markerClusterer);
　　</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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
　　#allmap{width:100%;height:100%;}
　　p{margin-left:5px; font-size:14px;}
　　</style>
　　<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8hmxKhlglurmsX4SpBKoT13YtELFysZq"></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>
　　</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(108.720599,34.339295), 12);
　　//启用滑轮控制地图大小
　　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("<div style='height:100px;width:200px;overflow:auto;background:#FFFFCC'>"+content+"</div>");  // 创建信息窗口对象
　　//添加鼠标放置事件
　　marker.addEventListener("mouseover", function () { this.openInfoWindow(infoWindow); });
　　//添加点击事件
　　marker.addEventListener("click", function () { alert(name)});
　　//将标记放入标记数组
　　markers.push(marker);
　　}
　　bindPoint(108.741619,34.350293,"咸阳站" );
　　bindPoint(108.738996,34.349034,"新好望角酒店" );
　　bindPoint(108.736598,34.345368,"凤凰生活广场" );
　　bindPoint(108.733795,34.343736,"咸阳市中心医院" );
　　bindPoint(108.743029,34.344556,"咸阳供电局" );
　　bindPoint(108.731585,34.34092,"咸阳博物馆" );
　　var lon;
　　var lat;
　　var randomPoint = 500;  //随机生成的点数
　　//循环生成randomPoint个点
　　for (var k = 0; k < randomPoint; k++)
　　{
　　lon = randomNum(108.654043,108.83083);//经度范围
　　lat = randomNum(34.419513,34.258314);   //纬度范围
　　console.log(lon+", "+ lat);
　　bindPoint(lon,lat,k);
　　}
　　//调用API聚合函数将标记数组显示在地图上
　　var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
　　console.log(markerClusterer);
　　</script>

经测试，如果加载点数超多，页面打开缓慢。将脚本文件 http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js

下载到本地会提高速度。