如何在Google地圖中旋轉標記？

Question

以下是旋轉標記的代碼，但是如何旋轉自定義標記。任何想法？

var angleDegrees = 150; 
new google.maps.Marker({ 
    position: a, 
    map: map, 
    icon: { 
     path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
     scale: 6, 
     fillColor: "red", 
     fillOpacity: 0.8, 
     strokeWeight: 2, 
     rotation: angleDegrees //this is how to rotate the pointer 
    } 
}); 

Answer 1

的API reference沒有具體說什麼有關如何轉動完成，但因爲path需要一個SVG元素我說，他們是如何管理，以旋轉它，多數民衆贊成。如果您使用SVG創建自定義標記，則可以使用transform="rotate(deg centerX centerY")輕鬆完成。

Answer 2

您可以使用下面的函數來旋轉圖像，要素是圖像和程度是要旋轉的角度，零是當箭頭是到北：

function (element, degree) { 
    if (navigator.userAgent.match("Chrome")) { 
     element.style.WebkitTransform = "rotate(" + degree + "deg)"; 
    } 
    else if (navigator.userAgent.match("Firefox")) { 
     element.style.MozTransform = "rotate(" + degree + "deg)"; 
    } 
    else if (navigator.userAgent.match("MSIE")) { 
     element.style.msTransform = "rotate(" + degree + "deg)"; 
    } 
    else if (navigator.userAgent.match("Opera")) { 
     element.style.OTransform = "rotate(" + degree + "deg)"; 
    } 
    else { 
     element.style.transform = "rotate(" + degree + "deg)"; 
    } 
} 

最好的問候，

Chen

Answer 3

旋轉在API中可用。 https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-custom

var icon = { 
    ... 
    path: '...', 
    scale: 1, 
    rotation: [degrees] 
}; 

marker = new google.maps.Marker({ 
    map: [...], 
    icon: icon, 
    ... 
});