首页 > 代码库 > 百度地图实时侦听鼠标滚轮获取地图zoom缩放级别

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

2024-09-16 01:43:32   214人阅读

百度地图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=http://www.mamicode.com/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 {width: 90%;height: 90%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #info{width:70px;height:30px}
    </style>
    <script type=‘text/javascript‘ src=http://www.mamicode.com/‘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="width: 50px;display: inline-block;">id：</span>‘ + point.id + ‘</li>‘
                +‘<li style="line-height: 26px;font-size: 15px;">‘
                +‘<span style="width: 50px;display: inline-block;">名称：</span>‘ + point.name + ‘</li>‘
                +‘<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">查看：</span><a href="http://www.mamicode.com/‘+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=http://www.mamicode.com/map.getZoom();
    }
    /*注册事件*/
    if(document.addEventListener){
        document.addEventListener(‘DOMMouseScroll‘,scrollFunc,false);
    }//W3C
    window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
    </script>


 

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


联系
我们