Question

我在Firefox 20.0中使用谷歌地图（使用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）

＆GT;＆GT;在黑色导航栏上，单击标签为“Réalisations”的复选框。它会导致控制台出错。

布劳尔斯：

Firefox 20.0：错误......
Google Chrome 26.0：有效
IE 9：有效
Safari 5.1.7：有效
Opera 12.14：有效

有人可以帮助我吗？

Answer 1

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

1。）设置网址（显然） 2.）设置大小（此NEEDS为原始图像大小，以像素为单位）
3.）设置scaledSize（这是你想要的最终结果像素大小） 4.）设置锚点（这应该是scaledSize.height的scaledSize.width的1/2，以便它附加到图标底部中心的地图上）

以下是我使用过的一些示例代码：

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

Answer 2

我遇到了同样的问题，经过一些研究和简单的解决方法后，我能够解决这个问题。

这就是我所做的。

您似乎需要同时设置“尺寸”和“尺寸”。 “scaleSize”属性可以在FF中使用。但是，还有另外一件事让我感到烦恼。当我将“尺寸”属性设置为图标的原始尺寸时，图标会缩放但突然裁剪而不显示完整图标 - 可能是因为尺寸限制。

所以，我将“size”属性设置为缩放img 的最大限制（在我的情况下为64），它就像魅力一样。

                   cObject.setIcon({
                        url: cObject.getIcon().url,
                        scaledSize: new google.maps.Size(icoSize, icoSize-1),
                        size:new google.maps.Size(64, 64)
                    });

Firefox＆amp; Google Map API v3：IndexSizeError

2 个答案: