百度地图实时侦听鼠标滚轮获取地图zoom缩放级别

百度地图api提供的获取地图缩放级别的方法比较单一,就一个getZoom()方法,这个方法能够获取一次地图缩放级别,后面随着鼠标滚轮的滚动,地图缩放级别被改变,就无法再获取地图缩放级别了,具体api参考:http://developer.baidu.com/map/reference/index.php?title=Class:%E6%9E%81%E9%80%9F%E7%89%88%E6%A0%B8%E5%BF%83%E7%B1%BB/map

如题,若想实时获取地图的缩放级别,小博主是这样做的,添加鼠标滚轮事件,实时侦听鼠标滚轮(办法可能有点笨,欢迎指正交流),获取地图的缩放级别,关键代码如下(firefox另考虑):

var scrollFunc=function(e){
e=e || window.event;
var t1=document.getElementById("mapInfo");
t1.value=map.getZoom();
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

效果图:


完整源代码:(记得在ak处加上自己的ak值)
<!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 { 90%;height: 90%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#info{70px;height:30px}
</style>
<script type='text/javascript' src='http://api.map.baidu.com/api?v=2.0&ak=你的ak'></script>
<title>百度地图api展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="mapInfo"/>
<script type="text/javascript">

//新建三个地图上点
var points = [
{"lng": 109.771014 ,"lat": 18.317605 ,"url":"http://www.baidu.com" ,"id":1, "name":" 石塘中餐厅 "},
{"lng": 109.770125 ,"lat": 18.317365 ,"url":"http://www.baidu.com" ,"id":2, "name":" 池塘水榭 "},
{"lng": 109.769298 ,"lat": 18.318206 ,"url":"http://www.baidu.com" ,"id":3, "name":" 珊瑚酒店 "}
];

//创建标注点并添加到地图中
function addMarker(points) {
//循环建立标注点
for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
var marker = new BMap.Marker(point); //将点转化成标注点
var label1=points[i].name;
var label = new BMap.Label(label1, {offset: new BMap.Size(15, -25)});
marker.setLabel(label);
map.addOverlay(marker); //将标注点添加到地图上
//添加监听事件
(function() {
var thePoint = points[i];
marker.addEventListener("click",
function() {
showInfo(this,thePoint);
});
})();
}
}
function showInfo(thisMarker,point) {
//获取点的信息
var sContent =
'<ul style="margin:0 0 5px 0;padding:0.2em 0">'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style=" 50px;display: inline-block;">id:</span>' + point.id + '</li>'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style=" 50px;display: inline-block;">名称:</span>' + point.name + '</li>'
+'<li style="line-height: 26px;font-size: 15px;"><span style=" 50px;display: inline-block;">查看:</span><a href="'+point.url+'">详情</a></li>'
+'</ul>';
var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}

//创建地图
var map = new BMap.Map('allmap');
map.centerAndZoom(new BMap.Point(109, 18), 11); // 设置中心点
map.centerAndZoom( "三亚");
map.setCurrentCity("三亚"); //设置为衡阳
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
addMarker(points);

var scrollFunc=function(e){
e=e || window.event;
var t1=document.getElementById("mapInfo");
t1.value=map.getZoom();
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script>


原文地址:https://www.cnblogs.com/milkytea/p/6739526.html