Как повернуть маркер в Картах 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

The 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, 
    ... 
});