谷歌地图API+Wax.g+IE=小瓷砖

Google Maps API + Wax.g + IE = Tiny Tiles

本文关键字：API+Wax g+IE 谷歌地图      更新时间：2023-09-26

我正在使用wax.g在谷歌地图上显示自定义瓷砖。这在我测试过的每一个浏览器中都很好，除了IE。在其他浏览器中，瓦片被正确渲染，但在IE中，瓦片是真实自我的较小版本。这个问题在以下屏幕截图中得到了最好的解释：

它们应该是什么样子：http://cl.ly/image/2E0U2b0c0f0W

它们在IE中的样子：http://cl.ly/image/2F3B353q0G0c

这个问题并不总是发生，如果我平移或缩放，有时我会得到正确大小的瓷砖，有时我不会。不确定这是Wax问题还是Google Maps API渲染自定义overlayMapTypes的问题。其他人经历过这个问题吗？任何见解都将不胜感激。。。

（从MapBox GitHub问题交叉发布-还没有答案）

所以问题是我的图像继承了auto的样式高度和宽度，Wax.g的getTile方法使用new Image(256, 256)创建了一个Image，它写入img本身的高度和宽度属性（img属性，而不是内联样式）。内联样式的优先级高于属性，因此使用auto调整img的大小。我通过使用内联样式确保img的高度和宽度为256来解决这个问题。

Wax.g代码：

// Get a tile element from a coordinate, zoom level, and an ownerDocument.
wax.g.connector.prototype.getTile = function(coord, zoom, ownerDocument) {
    var key = zoom + '/' + coord.x + '/' + coord.y;
    if (!this.cache[key]) {
        var img = this.cache[key] = new Image(256, 256);
        this.cache[key].src = this.getTileUrl(coord, zoom);
        this.cache[key].setAttribute('gTileKey', key);
        this.cache[key].onerror = function() { img.style.display = 'none'; };
    }
    return this.cache[key];
};

我修改的代码：

// Get a tile element from a coordinate, zoom level, and an ownerDocument.
wax.g.connector.prototype.getTile = function(coord, zoom, ownerDocument) {
    var key = zoom + '/' + coord.x + '/' + coord.y;
    if (!this.cache[key]) {
        var img = this.cache[key] = new Image(256, 256);
        img.style.height = '256px';  // added this line
        img.style.width = '256px';  // added this line
        this.cache[key].src = this.getTileUrl(coord, zoom);
        this.cache[key].setAttribute('gTileKey', key);
        this.cache[key].onerror = function() { img.style.display = 'none'; };
    }
    return this.cache[key];
};
相关文章：