javascript - 根据 Google Maps API 的缩放级别更新边界 - 已修订

Question

我正在构建自定义 map 并将边界设置到它的边缘，但是当更改缩放级别时，边界似乎不符合这些边缘。我尝试了 this question 中的解决方案但他们似乎有同样的问题。

你可以从@koen http://jsfiddle.net/koenpunt/n7h6t/ 看到这个 fiddle 有同样的问题, 只需平移到边缘然后放大几次， map 就会开始在边缘被切断。

这是我的代码:

var map;
window.onload = function() {

    // Define our custom map type
    var customMapType = new google.maps.ImageMapType({
        getTileUrl: function(coord, zoom) {
            var normalizedCoord = getNormalizedCoord(coord, zoom);
            if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
                return zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
            } else {
                return 'empty.jpg';
            }
        },
        tileSize: new google.maps.Size(256, 256),
        maxZoom: 4,
        name: 'Title'
    });

    // Basic options for our map
    var myOptions = {
        center: new google.maps.LatLng(0, 0),
        zoom: 2,
        minZoom: 2,
        streetViewControl: false,
        mapTypeControl: false,
        mapTypeControlOptions: {
            mapTypeIds: ["custom"]
        }
    };

    // Init the map and hook our custom map type to it
    map = new google.maps.Map(document.getElementById('map'), myOptions);
    map.mapTypes.set('custom', customMapType);
    map.setMapTypeId('custom');


    // bounds of the desired area
    var allowedBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-75.716, -90),
      new google.maps.LatLng(75.716, 90)
    );
    var boundLimits = {
        maxLat : allowedBounds.getNorthEast().lat(),
        maxLng : allowedBounds.getNorthEast().lng(),
        minLat : allowedBounds.getSouthWest().lat(),
        minLng : allowedBounds.getSouthWest().lng()
    };

    var lastValidCenter = map.getCenter();
    var newLat, newLng;
    google.maps.event.addListener(map, 'center_changed', function() {
        center = map.getCenter();
        if (allowedBounds.contains(center)) {
            // still within valid bounds, so save the last valid position
            lastValidCenter = map.getCenter();
            return;
        }
        newLat = lastValidCenter.lat();
        newLng = lastValidCenter.lng();
        if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
            newLng = center.lng();
        }
        if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
            newLat = center.lat();
        }
        map.panTo(new google.maps.LatLng(newLat, newLng));
    });

    //alert(map.getCenter());
}
function getBoundsM(){
    alert(map.getBounds());
}

编辑:我最后所做的是将 map 缩小并在原始 map 周围添加更多背景。这给人的印象是不需要平移超出可搜索区域的范围。更多的是“雾里看花”的东西，但它满足了我的需要。

Answer 1

您的脚本强制 map 的中心保持在纬度/经度边界内。这取决于您看到的中心周围 map 的缩放级别。如果对于给定的缩放级别， map 在经度上跨越 1000 公里，那么您能够看到的最东点是 allowedBounds.getNorthEast().lng() + 500 公里。如果放大并且跨度区域缩小到 500 公里，最东端点变为 allowedBounds.getNorthEast().lng() + 250 公里 等等。

您似乎想限制用户能够看到的内容，即 map 边界的位置而不是其中心。为此，您必须检查 map.getBounds().getNorthEast() 和 map.getBounds().getSouthWest() 是否在允许的范围内。

这是一个更新的 JsFiddle，它可以做到这一点。请注意，您仍然可以缩小到大于 allowedBounds 的区域，但将无法再在该缩放级别上移动:http://jsfiddle.net/Ya7ju/2/