繪製圖像疊加的行爲奇怪

Question

我想畫一個位圖（PNG），如谷歌地圖疊加，每個地圖瓦。我希望能夠將自己的位圖繪製爲疊加。 經過一番搗鼓之後，我制定瞭如何在畫布上繪畫。 繪製線條工作正常，但繪製加載的圖像表現非常奇怪。對縮放和平移的反應尚不清楚。我試圖在onload功能困擾，但它並沒有改善......

我的問題： 我該怎麼辦錯了嗎？ 如何在平鋪上繪製位圖作爲疊加層？

謝謝。

另請參閱https://jsfiddle.net/rolandinoman/1twa0p74/8/ 平移和放大/縮小以查看效果。代碼

/** 
* sometimes the png is drawn, sometimes it is not . 
* don't get it. 
*/ 

/** @constructor */ 
function CoordMapType(tileSize) { 
    this.tileSize = tileSize; 
} 

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { 
    var div = ownerDocument.createElement('div'); 

    var canvas = ownerDocument.createElement('canvas'); 
    canvas.id  = "canv"; 
    w = 256; 
    h = 256; 
    canvas.width = w; 
    canvas.height = h; 
    ctx = canvas.getContext('2d'); 
    cs = getComputedStyle(div); 
    /// draw some lines on canvas 
    ctx.lineWidth = 1; 
    ctx.strokeStyle = "#FF0000"; 
    ctx.strokeRect(6, 6, w-6, h-6); 
    // draw an image on the canvas: 
    var image = new Image(256,256); 
    image.onload = function(){ ctx.drawImage(image, 0, 0);} 
    // picked a random bitmap 256X256: 
    image.src = "http://files.softicons.com/download/application-icons/malware-icons-by-deleket/png/256x256/Malware.png" 

    //ctx.drawImage(image, 0, 0); // alternative to onload, behaves also erratic. 
    div.appendChild(canvas) 

    return div; 
}; 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: {lat: 41.850, lng: -87.650} 
    }); 

    // Insert this overlay map type as the first overlay map type at 
    // position 0. Note that all overlay map types appear on top of 
    // their parent base map. 
    map.overlayMapTypes.insertAt(
     0, new CoordMapType(new google.maps.Size(256, 256))); 
} 

Answer 1

例子，我相信你有onload事件的問題;如果圖像已經在緩存中，它不會觸發（至少在某些情況下）。

你可以預加載圖像，則不能使用onload事件。

代碼片段：

/** @constructor */ 
 
function CoordMapType(tileSize) { 
 
    this.tileSize = tileSize; 
 
} 
 

 
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { 
 
    var div = ownerDocument.createElement('div'); 
 
    var canvas = ownerDocument.createElement('canvas'); 
 
    w = 256; 
 
    h = 256; 
 
    canvas.width = w; 
 
    canvas.height = h; 
 
    ctx = canvas.getContext('2d'); 
 
    cs = getComputedStyle(div); 
 
    /// draw something on canvas 
 
    ctx.lineWidth = 1; 
 
    ctx.strokeStyle = "#FF0000"; 
 
    ctx.strokeRect(6, 6, w - 6, h - 6); 
 
    var image = new Image(256, 256); 
 
    image.src = "http://files.softicons.com/download/application-icons/malware-icons-by-deleket/png/256x256/Malware.png" 
 
    ctx.drawImage(image, 0, 0); 
 
    div.appendChild(canvas); 
 
    return div; 
 
}; 
 

 
function initMap() { 
 
    document.getElementById('nodisp').style.display = "none"; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10, 
 
    center: { 
 
     lat: 41.850, 
 
     lng: -87.650 
 
    } 
 
    }); 
 

 
    // Insert this overlay map type as the first overlay map type at 
 
    // position 0. Note that all overlay map types appear on top of 
 
    // their parent base map. 
 
    map.overlayMapTypes.insertAt(
 
    0, new CoordMapType(new google.maps.Size(256, 256))); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initMap);

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
}

<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script src="https://maps.googleapis.com/maps/api/js"> 
 
</script> 
 
<img id="nodisp" src="http://files.softicons.com/download/application-icons/malware-icons-by-deleket/png/256x256/Malware.png" />