拖动地图动态加载覆盖物
并且对放大级别不一样,显示不同覆盖物
<!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:90%; overflow: hidden;}
#result {width:100%;font-size:12px;}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
p{font-size:12px;}
dt{
font-size:14px;
font-family:"微软雅黑";
font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4BBwyxZA5G2PLjXe8zULeQ5iA4msVuW6"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<!--加载检索信息窗口-->
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<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>demo</title>
</head>
<body>
<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
<div id="result">
<input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>
<input type="button" value="清除所有覆盖物" onclick="clearAll()"/>
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map");
var point = new BMap.Point(116.407928,39.882974); //中心点
map.centerAndZoom(point,16); //设置中心点，缩放层级
/* var x = 121.443657;
var y = 31.188743;
//GPS坐标
var ggPoint = new BMap.Point(x,y);
//地图初始化
var bm = new BMap.Map("allmap");
bm.centerAndZoom(ggPoint, 15);
bm.addControl(new BMap.NavigationControl());
//添加gps marker和label
var markergg = new BMap.Marker(ggPoint);
bm.addOverlay(markergg); //添加GPS marker
var labelgg = new BMap.Label("未转换的GPS坐标（错误）",{offset:new BMap.Size(20,-10)});
markergg.setLabel(labelgg); //添加GPS label
//坐标转换完之后的回调函数
translateCallback = function (data){
if(data.status === 0) {
var marker = new BMap.Marker(data.points[0]);
bm.addOverlay(marker);
var label = new BMap.Label("转换后的百度坐标（正确）",{offset:new BMap.Size(20,-10)});
marker.setLabel(label); //添加百度label
bm.setCenter(data.points[0]);
}
}
setTimeout(function(){
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback)
}, 1000);*/
map.addEventListener("zoomend", function(e){//改变放大级别
centerLng =e.target.gf.lng;
centerLat =e.target.gf.lat;
make(centerLng,centerLat)
});
map.addEventListener("dragend", function (e) {//拖动结束触发
centerLng =e.target.gf.lng;
centerLat =e.target.gf.lat;
make(centerLng,centerLat);
});
var ylng=0;
var ylat=0;
function make(centerLng,centerLat) {
var zoom=map.getZoom();//放大级别
if(zoom<=12){
//显示小点位
alert('小')
}else{
//显示大点位
if(ylng>centerLng+0.008||centerLng>ylng+0.008||ylat>centerLat+0.008||centerLat>ylat+0.008){
//超范围重新获取点位
ylng=centerLng;
ylat=centerLat;
map.clearOverlays();
}
}
var point = new BMap.Point(centerLng,centerLat); //中心点
var markergg = new BMap.Marker(point);
map.addOverlay(markergg); //添加GPS marker
}
// //点击的位置
map.addEventListener("click", function (e) {
console.log("当前位置：" + e.point.lng + ", " + e.point.lat);
});
function clearAll(){
map.clearOverlays();
}
</script>