Question

我正在构建自定义地图并将边界设置为边缘，但是当更改缩放级别时，边界似乎不会遵循这些边缘。我尝试过this question的解决方案，但它们似乎有同样的问题。

你可以从@koen http://jsfiddle.net/koenpunt/n7h6t/看到这个小提琴的同样问题，只是平移到边缘然后放大几次，地图将开始在边缘切断。

这是我的代码：

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());
}

修改：我最终做的是缩小地图尺寸并在原始地图周围添加更多背景。这给人的印象是没有必要超越可搜索区域的范围。更多的是“烟雾缭绕”的东西，但它能满足我的需求。

Answer 1

您的脚本强制地图的中心保持在纬度/经度边界内。这取决于缩放级别您所看到的中心周围的数量。如果对于给定的缩放级别，地图的经度为1000公里，则您能够看到的最东点是allowedBounds.getNorthEast().lng() + 500 km。如果放大并且跨区域减少到500 km，则最东点将变为allowedBounds.getNorthEast().lng() + 250 km，依此类推。

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

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

Answer 2

您是否尝试过使用fitBounds和panToBounds而不是强制最大边界？

var bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(41.93707, -88.00018));
bounds.extend(new google.maps.LatLng(38.67033, -89.98455));
bounds.extend(new google.maps.LatLng(41.68259, -87.64164));
bounds.extend(new google.maps.LatLng(41.75036, -87.66525));

setTimeout(function() {
    google.maps.event.trigger(map.GMap, 'resize');
    map.GMap.fitBounds(bounds);
    map.GMap.panToBounds(bounds);
}, 150);

您可以在我们的网站上查看此操作。请注意，我们还使用标记聚类。 www.Autoquoter.com Offices

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

2 个答案: