Googleマップのオーバーレイが最初の更新で描画されないのはなぜですか？

Question

私はGoogle-maps overlay exampleに従っていて、自分のニーズに合わせて修正しました。私は十分な長さの距離のためのマップを翻訳したりで/ズームアウトするまで、私のオーバーレイは表示されません最初にページをロードすると

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

：これはUSGSOverlayのための私の新しいdrawプロトタイプです。

Answer 1

問題は私が操作this.img_.naturalWidthとthis.img_.naturalHeightが時間がかかり過ぎて、各オーバーレイの描画機能を1回実行すると仮定したところでマップを開始するための値を与えていないということです。

私のソリューションは、USGSOverlayためonAddプロトタイプの画像のリスナーを追加しました：それはロードされたイメージだ後

var thisOverlay = this; 
//draw country when image is finished loading 
this.img_.onload = function(e){ 
    thisOverlay.draw(); 
} 

このオーバーレイの描画関数を呼び出します。

onload関数からオブジェクト自体にアクセスできないため、変数が必要です。