Multi-Layer-Marker für google.maps.api mit js (angularJS)

Question

Ich arbeite an einer App, die eine Karte verwendet und ich wählte Google Maps für diese. Diese Karte muss verschiedene Arten von Markern enthalten. Jeder Marker hat 2 Ebenen, 1 - Marker Hintergrund, 2 - ein Bild, das ich von meinem Server bekomme.

Die beste Lösung, die ich bisher gefunden habe, ist die Verwendung von Canvas, um ein Bild zu zeichnen und dann canvas.toDataUrl für Markersymbol url zurückgeben. Hier

ist ein Code:

bekommen url:

function createMarker(width, height, radius) { 

    var canvas, context; 

    canvas = document.getElementById("canvas"); 
    canvas.width = width; 
    canvas.height = height; 

    context = canvas.getContext("2d"); 

    context.clearRect(0,0,width,height); 

    context.fillStyle = "rgba(255,255,0,1)"; 

    context.strokeStyle = "rgba(0,0,0,1)"; 

    context.beginPath(); 
    context.moveTo(radius, 0); 
    context.lineTo(width - radius, 0); 
    context.quadraticCurveTo(width, 0, width, radius); 
    context.lineTo(width, height - radius); 
    context.quadraticCurveTo(width, height, width - radius, height); 
    context.lineTo(radius, height); 
    context.quadraticCurveTo(0, height, 0, height - radius); 
    context.lineTo(0, radius); 
    context.quadraticCurveTo(0, 0, radius, 0); 
    context.closePath(); 


    var img1 = new Image(); img1.src = 'img/pin.png'; img1.onload = function() { 
     context.drawImage(img1, 0, 0, 25, 25); 


    }; 

    var img2 = new Image(); img2.src = 'img/cluster.png'; 
    img2.onload = function() { 
     context.drawImage(img2, 0, 0, 25, 25); 

    }; 

    context.fill(); 
    context.stroke(); 

    return canvas.toDataURL(); 

} 

---

Und im Browser erhalte ich diese:

Under my map I add canvas witch which url I use for marker

Es sieht aus wie der Marker Leinwand ignoriert Bilder.

Was mache ich falsch? Oder hast du eine bessere Lösung für mein Problem?

Answer 1

Meine Lösung für dieses Problem ist die Erstellung Marker innerhalb Onload-Funktion des Bildes.

---

Beispiel:

var canvas, context; 

canvas = document.getElementById("canvas"); 
canvas.width = width; 
canvas.height = height; 

context = canvas.getContext("2d"); 

var img1 = new Image(); 
img1.src = 'img/pin.png'; 
img1.onload = function() { 
context.drawImage(img1, 0, 0, 25, 25); 
var marker = new google.maps.Marker({ 
    map: map, 
    position: {lat: $scope.data[el].latitude, lng: $scope.data[el].longitude}, 
    icon: {url: canvas.toDataURL(), size: new google.maps.Size(25, 25)} 
}) 
}; 

---