Question

我关注Google-maps overlay example并修改了它以满足我的需求。这是draw的新USGSOverlay原型：

USGSOverlay.prototype.draw = function()
{
    //need to use projection to get image position from latLng to Px
    var overlayProjection = this.getProjection();
    var mapPos = new google.maps.LatLng(this.y_, this.x_);
    var posInPx = overlayProjection.fromLatLngToDivPixel(mapPos);

    //calculate the size in current zoom
    //imageScaleFactor is a global variable placed on top in document
    var dx = Math.abs(this.img_.naturalWidth * Math.pow(2, map.getZoom()) * imageScaleFactor);
    var dy = (dx / this.img_.naturalWidth) * this.img_.naturalHeight;

    // Resize the image's div to fit the indicated dimensions.
    //places the image so that the given input (x_, y_) is in the center
    var div = this.div_;
    div.style.left = posInPx.x - dx / 2 + 'px';
    div.style.top = posInPx.y - dy / 2 + 'px';
    div.style.width = dx + 'px';
    div.style.height = dy + 'px';
};

当我第一次加载页面时，在我将地图翻译足够长的距离或放大/缩小之前，我的叠加层不会出现。

Answer 1

问题在于我操作this.img_.naturalWidth和this.img_.naturalHeight花了太长时间并且没有及时给出地图值以启动地图，我认为它运行了绘制功能对于每个叠加一次。

我的解决方案是在onAdd的{{1}}原型中为图像添加一个监听器：

USGSOverlay

一旦加载了图像，这将调用叠加的绘图功能。

需要var thisOverlay = this; //draw country when image is finished loading this.img_.onload = function(e){ thisOverlay.draw(); }变量，因为据我所知，无法从thisOverlay函数访问对象本身。

为什么我的谷歌地图叠加层没有在第一次更新时绘制？

1 个答案: