使用js（angularJS）google.maps.api的多層標記

Question

我正在使用地圖的應用程序，我選擇了谷歌地圖。這張地圖必須包含不同類型的標記。每個標記有2層，1 - 標記背景，2 - 從我的服務器獲得的圖像。

我到目前爲止發現的最佳解決方案是使用畫布繪製圖像，然後返回canvas.toDataUrl作爲標記圖標網址。

下面是一些代碼：

越來越網址：

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(); 

} 

---

而且在瀏覽器中我得到這個：

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

它看起來像標記忽略帆布圖片。

我在做什麼錯？或者你對我的問題有更好的解決方案嗎？

Answer 1

我對這個問題的解決方案是在圖像的onload函數內部創建標記。

---

實施例：

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

---