根据网友的进行整理。存在的问题:手机上使用时,点击标注点,信息窗口闪退,电脑上可以。
固定点聚合
完整代码
<!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
下载到本地会提高速度。