Javascript 基于谷歌地图API的缩放级别更新边界-修订版

我正在构建一个自定义贴图，并将边界设置到它的边缘，但是当缩放级别更改时，边界似乎不会附着到这些边缘。我尝试了来自的解决方案，但它们似乎有相同的问题

你可以在@koen中看到同样的问题，只需平移到一个边缘，然后放大几次，地图将开始在边缘处被切断

这是我的密码：

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

var映射；
window.onload=函数（）{
//定义我们的自定义映射类型
var customMapType=new google.maps.ImageMapType({
getTileUrl:函数（坐标、缩放）{
var normalizedCoord=getNormalizedCoord（坐标，缩放）；
if（normalizedCoord&&（normalizedCoord.x-1）&&（normalizedCoord.y-1））{
返回zoom+''''.'+normalizedCoord.x+'.'.'+normalizedCoord.y+'.jpg'；
}否则{
返回'empty.jpg'；
}
},
tileSize:new google.maps.Size（256256），
最大缩放：4，
姓名：'头衔'
});
//我们地图的基本选项
变量myOptions={
中心：新google.maps.LatLng（0,0），
缩放：2，
minZoom:2，
街景控制：错误，
mapTypeControl:false，
mapTypeControlOptions：{
MapTypeId:[“自定义”]
}
};
//初始化映射并将自定义映射类型挂接到它
map=new google.maps.map（document.getElementById（'map'），myOptions）；
map.mapTypes.set（'custom'，customMapType）；
setMapTypeId（'custom'）；
//所需区域的边界
var allowedBounds=new google.maps.LatLngBounds(
新google.maps.LatLng（-75.716，-90），
新google.maps.LatLng（75.71690）
);
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（中间））{
//仍然在有效边界内，因此保存最后一个有效位置
lastValidCenter=map.getCenter（）；
返回；
}
newLat=lastValidCenter.lat（）；
newLng=lastValidCenter.lng（）；
if（center.lng（）>boundLimits.minLng&¢er.lng（）boundLimits.minLat&¢er.lat（）

---

编辑：我最后做的是缩小地图的大小，并在原始地图周围添加更多背景。这给人的印象是，没有必要越过可搜索区域的边界。更像是“烟雾和镜子”的东西，但它满足了我的需要。

您的脚本强制地图的中心保持在纬度/经度边界内。这取决于缩放级别，即您看到的围绕中心的地图的大小。如果对于给定的缩放级别，地图的经度跨度为1000公里，则您能看到的最东面点是

allowedBounds.getNorthEast（）.lng（）+500公里

。如果放大并将跨区缩小到500公里，最东边的点将变为

allowedBounds.getNorthEast（）.lng（）+250公里

，依此类推

您似乎希望限制用户能够看到的内容，即地图边界的位置，而不是地图中心的位置。为此，您必须检查

map.getBounds（）.getNorthEast（）

和

map.getBounds（）.getSouthWest（）

是否在允许的范围内

---

下面是一个更新的JSFIDLE，它可以做到这一点。请注意，您仍然可以缩小到大于

允许边界的区域，但将无法再在该缩放级别上移动：
您是否尝试使用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);

您可以在我们的网站上查看此操作。注意，我们还使用了标记聚类。
什么是“当缩放级别改变时，边界似乎不与这些边缘相一致”@geocodezip我的意思是，当您最初设置LatLong边界以限制上、下、左或右平移时，一旦您增加地图的缩放，这些边界就不再准确，需要重置，但不确定这个等式是多少或是什么。有道理吗？我还是不明白。边界是真实的物理位置，你想在用户放大时改变它吗？看一下我提供的JSFIDLE，注意在初始缩放级别地图周围有多少水是可见的，然后缩放地图，注意随着缩放级别的增加，水被切断了-我试图阻止这种情况，并能够保持相同的边界区域。当你说“增加缩放级别”时，你是指放大（增大缩放值）还是缩小（减小缩放值）？哇，感谢你的澄清和简单的修复/调整。我想我已经看了太久，没有看到那个解决方案——赏金奖