Zeichnung Bild Overlay in Kachel verhält sich seltsam

Question

Ich versuche, eine Bitmap (Png) als Overlay in Google Maps für jede Karte-Kachel zu zeichnen. Ich möchte meine eigene Bitmap als Overlay zeichnen können. Nach einigem Tüfteln habe ich ausgearbeitet, wie man auf eine Leinwand zeichnet. Das Zeichnen von Linien funktioniert gut, aber das Zeichnen eines geladenen Bildes verhält sich sehr seltsam. Die Reaktionen auf Zoomen und Schwenken sind unklar. Ich habe versucht, mit der Onload-Funktion zu rätseln, aber es verbessert nicht ...

Meine Fragen: Was mache ich falsch? Wie zeichne ich eine Bitmap als Overlay auf einer Kachel?

Vielen Dank.

siehe auch https://jsfiddle.net/rolandinoman/1twa0p74/8/ schwenken und vergrößern/verkleinern, um die Effekte zu sehen.

Beispiel Code

/** 
* 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

Ich glaube, Sie haben ein Problem mit dem onload-Ereignisse; Es wird (zumindest in einigen Fällen) nicht ausgelöst, wenn sich das Image bereits im Cache befindet.

Sie könnten das Bild vorab laden und dann das Onload-Ereignis nicht verwenden.

Code-Schnipsel:

/** @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" />