javascript - 超出最大调用堆栈大小/Google map API 自定义 map 类型在允许的范围内递归过多

Question

我正在尝试使用自定义 map 类型图像 map 作为背景来创建页面。我需要限制图像上的平移，这样就不可能平移图像，但是当向左/右平移 map 时(沿着 x/经度轴)， map 消失，我得到一个“最大堆栈”超出大小”(Chrome) 或“太多递归”(Firefox) 错误。

事实证明我不是唯一一个遇到这个问题的人，但在大多数情况下，人们在坐标中的小数符号(而不是 .)上遇到了麻烦，但这不是我的情况，因为我不这样做不要使用小数。

我认为this可能是我的情况，但不确定如何处理未定义的纬度。 (主要是因为我对 JavaScript 总体来说还很陌生。)

这是我用于 map 的所有代码:

    function init() {
    var map;
    var repeatOnAxisX = false;
    var blankTile = "img/map/empty.png";
    var min_zoom = 4,
        max_zoom = 5;

    function getNormalizedCoord(coord, zoom) {
        if(!repeatOnAxisX) return coord;
        var totalTiles = 1 << (zoom - min_zoom),
            y = coord.y,
            x = coord.x;
        var originX = 1 << (zoom - 1),
            originY = 1 << (zoom - 1);
        if(y < originX || y >= originX + totalTiles || x < originX || x >= originX + totalTiles) {
            return null;
        }
        x -= originX;
        y -= originY;
        return {
            x : x,
            y : y
        };
    }

    var customMapType = new google.maps.ImageMapType({
        getTileUrl: function(coord, zoom) {
            var normalizedCoord = getNormalizedCoord(coord, zoom);
            if(normalizedCoord) {
                return "img/map/" + zoom + "/" + normalizedCoord.x + "/" + normalizedCoord.y + ".png";
            } else {
                return blankTile;
            }
        },
        tileSize: new google.maps.Size(256, 256),
        maxZoom: max_zoom,
        minZoom: min_zoom,
        name: "My Image Map"
    });

    var mapDiv = document.getElementById("map-canvas"),
        myCenter = new google.maps.LatLng(-1, -1),
        myOptions = {
            zoom: 5,
            center: myCenter,
            streetViewControl: false,
            mapTypeControl: false,
            mapTypeControlOptions: {
                mapTypeIds: ["custom"]
            }
        };

    map = new google.maps.Map(mapDiv, myOptions);
    map.mapTypes.set("custom", customMapType);
    map.setMapTypeId("custom");

    // Setting up the panning restriction
    var allowedBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-67, -74),
        new google.maps.LatLng(67, 74)
    );

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

google.maps.event.addDomListener(window, "load", init);

(我正在使用 this 解决方案来限制平移。)

编辑:这是一个 JSFiddle的问题。

非常感谢任何想法/帮助!比你!

Answer 1

在您检查 newLat 和 newLng 是否超出范围的 center_changed 监听器中，您将 center.lng() 的返回值(数字)分配给 newLng，但为 newLat 分配函数 center.lat:

if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng) {
    newLng = center.lng();
}
if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat) {
    newLat = center.lat;
}

显然，你需要调用center.lat:

newLat = center.lat();