2

几天或几周以来，我在 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)

我认为有一个缩放图像的链接（看到这个帖子），但似乎没有。我尝试在 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
    });
});

网址：此处（页面底部的 api）

>> 在黑色导航上，单击标签为“Réalisations”的复选框。这将导致控制台中的错误。

浏览器：

  • Firefox 20.0：错误...
  • 谷歌浏览器 26.0：有效
  • IE 9：有效
  • Safari 5.1.7：有效
  • 歌剧 12.14：作品

有人能帮我吗 ？

4

2 回答 2

1

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

这就是我所做的。

看来您需要同时设置“size”和“scaleSize”属性才能在 FF 中工作。但后来，还有一件事让我烦恼。当我将“大小”属性设置为图标的原始大小时，图标会缩放但突然被裁剪而没有显示完整的图标——可能是因为大小限制。

所以，我将“大小”属性设置为缩放后的 img 的最大限制（在我的例子中是 64），它就像一个魅力。

                   cObject.setIcon({
                        url: cObject.getIcon().url,
                        scaledSize: new google.maps.Size(icoSize, icoSize-1),
                        size:new google.maps.Size(64, 64)
                    });
于 2014-04-08T15:06:27.263 回答
1

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

1.）设置 url（显然）
2.）设置大小（这需要以像素为单位的原始图像大小）
3.）设置 scaledSize（这是您希望最终生成的像素大小）
4.）设置锚点（这应该是 scaledSize.width 的 1/2 乘以 scaledSize.height 以便它附加到图标底部中心的地图）

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

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
                    });
                }
            }
        }
    }
于 2013-09-28T19:28:04.953 回答