火狐和谷歌地图 API v3 : IndexSizeError

Question

几天或几周以来，我在 Firefox 20.0(在 Google Chrome 中运行良好)中使用 Google map (使用 v3)时遇到了一些麻烦，而以前却运行良好。 当我动态加载标记(使用 Ajax 从数据库加载)时，我的控制台 (Firebug) 中显示:

IndexSizeError: Index or size is negative or greater than the allowed amount
(102 out of range 43)

我认为有一个与缩放图像的链接(看到 this post )，但似乎没有。我尝试在 MarkerImage 的第二个和第五个参数中设置其他宽度和高度。同样的错误。

编辑:我注意到，当我不精确 ScaledSize 时，不会出现错误。这意味着 Firefox 无法调整我的图片大小，但是......我需要! :(

有很多代码，并且由于加载标记时错误会显示在控制台中，因此我将暂时向您展示与其对应的代码:

$.each(data, function(i) {
    // Where "data" is the json result of my ajax call
    var largeur = 80 + (20 * (map.getZoom() - 9));
    var ratio = largeur / 80;
    var hauteur = 56.8 * ratio;

    var marker = new google.maps.Marker({
        map: map,
        icon: new google.maps.MarkerImage("../images/realisations/" + data[i].image,
           new google.maps.Size(largeur, hauteur),
           new google.maps.Point(0, 0),
           new google.maps.Point(0, 0),
           new google.maps.Size(largeur, hauteur)
        ),
        position: new google.maps.LatLng(data[i].latitude, data[i].longitude),
        title: data[i].title
    });
});

网址:here (api在页面底部)

>> 在黑色导航栏中，单击标签为“Réalizes”的复选框。它将导致控制台出现错误。

浏览器:

• Firefox 20.0:错误...
• Google Chrome 26.0:可以运行
• IE 9:有效
• Safari 5.1.7:工作
• Opera 12.14:有效

有人可以帮助我吗？

Answer 1

要使 Firefox 正常工作，您需要定义图标的 4 个参数以使其正确缩放。

1.) 设置 url(显然)
2.) 设置尺寸(这需要是原始图像尺寸(以像素为单位))
3.) 设置scaledSize(这是您想要的最终像素大小)
4.)设置 anchor (这应该是scaledSize.width的1/2乘以scaledSize.height，以便它附着在图标底部中心的 map 上)

这是我使用过的一些示例代码:

google.maps.event.addListener(fc.map, 'zoom_changed', fc.zoomChanged);
...
...
zoomChanged : function() {
        var scaleRatio,zoom,i,iconImg,img_element,t,newScaledSize;
        scaleRatio = 1;
        zoom = fc.map.getZoom();
        if(zoom < 15) {
            //from zoom level 15+, make it full size, at 15-, reduce icon size by 15% each zoom level
            scaleRatio = 1 - ((15 - zoom) * 0.15);
        }

        if(scaleRatio < 0.05) {
            scaleRatio = 0.05;
        }

        //change the size of the icon
        for(i=0;i<fc.markers.length;i++) {
            if(fc.markers[i] != null) {
                iconImg = $('img[src="'+fc.markers[i].getIcon().url+'"]');
                img_element = iconImg.get(0);
                t = new Image();
                t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
                newScaledSize = new google.maps.Size(Math.ceil(t.width*scaleRatio), Math.ceil(t.height*scaleRatio));
                if(!newScaledSize.equals(fc.markers[i].getIcon().scaledSize)) {
                    var anchor = new google.maps.Point(Math.ceil(newScaledSize.width*0.5), newScaledSize.height);
                    console.log('anchor: '+anchor);
                    fc.markers[i].setIcon({
                        url : fc.markers[i].getIcon().url,
                        anchor : anchor,
                        size : new google.maps.Size(t.width, t.height),
                        scaledSize : newScaledSize
                    });
                }
            }
        }
    }