百度地图JavaScript API实时监控鼠标事件获取zoom及地图可视范围

最近项目需要用到这个,在网上找了很久都没个完善的,于是自己写了个。

注意自己替换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{ width: 95%;height: 95%;}
        #allMap{width: 90%;height: 90%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #mapBS{width:70px;height:50px}
    </style>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=***********"></script>
    <title>获取zoom及地图可视范围</title>
</head>
<body>
<div id="allMap"></div>
<label for="wheelDelta">滚动值:</label><input type="text" id="mapInfo"/>
<p>地图可视范围:<span type="text" id="mapBS"></span></p>
</body>
<script type="text/javascript">

    //新建三个地图上点
    var points = [
        {"lng":113.530001,"lat":23.360001},
        {"lng":114.070001,"lat":22.620001},
        {"lng":113.850001,"lat":23.010001}
    ];

    //创建地图
    var map = new BMap.Map('allMap');
    map.centerAndZoom(new BMap.Point(113.403157, 23.173796), 10);  // 设置中心点
//    map.addControl(new BMap.MapTypeControl());
    map.enableScrollWheelZoom(true);
    var view = map.getViewport(points);
    var mapZoom = view.zoom;
    var centerPoint = view.center;
    map.centerAndZoom(centerPoint,mapZoom);
    map.disableDoubleClickZoom();
    /*注册事件*/
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',setInterval(scrollFunc,100),false);
    }//W3C
    window.onmousewheel=document.onmousewheel=setInterval(scrollFunc,100);//IE/Opera/Chrome

    function scrollFunc(e) {
        e=e || window.event;

        var bs = map.getBounds();   //获取可视区域
        var bssw = bs.getSouthWest();   //可视区域左下角
        var bsne = bs.getNorthEast();   //可视区域右上角
        document.getElementById("mapInfo").value=map.getZoom();
        document.getElementById("mapBS").innerHTML="当前地图可视范围是:" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat;
    }
</script>
</html>

 

说点什么

avatar