Google maps V3控制地图的缩放和显示范围

最新推荐文章于 2023-07-05 09:30:46 发布

原创最新推荐文章于 2023-07-05 09:30:46 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#google maps V3 #缩放范围

地图开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用Google Maps V3 API来控制地图的缩放级别和显示范围。通过设定最小和最大ZoomLevel，并监听缩放级别变化，确保地图始终在指定区域内展示。

【熊猫大叔转载请注明出处：http://blog.youkuaiyun.com/pandaflyup】

1、控制地图的缩放范围：

实现起来很简单，设置一个最低和最高的缩放级别ZoomLevel，再添加一个监听缩放级别变化的事件即可，代码如下：

function initialize() {
        var MinZoomLevel=16;
        var myLatlng = new google.maps.LatLng(39.9629, 116.3581);
        var myOptions = {
            zoom: MinZoomLevel,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        //控制地图的缩放级别
        google.maps.event.addListener(map, 'zoom_changed',function() {
            if (map.getZoom() < MinZoomLevel) map.setZoom(MinZoomLevel);
         });
}

2、控制地图的显示范围：

通过划定一个界限，可以使地图只在划定的范围内显示，由于实现起来比较简单，就直接上代码了：

var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(14.48003790418668, 66.28120434863283),
    new google.maps.LatLng(54.44617552862156, 143.71284497363283)
);
google.maps.event.addListener(map, 'dragend',
function() {
    if (strictBounds.contains(map.getCenter())) return;
    var c = map.getCenter(),
    x = c.lng(),
    y = c.lat(),
    maxX = strictBounds.getNorthEast().lng(),
    maxY = strictBounds.getNorthEast().lat(),
    minX = strictBounds.getSouthWest().lng(),
    minY = strictBounds.getSouthWest().lat();
    if (x < minX) x = minX;
    if (x > maxX) x = maxX;
    if (y < minY) y = minY;
    if (y > maxY) y = maxY;
    map.setCenter(new google.maps.LatLng(y, x));
});