如何在谷歌地图中旋转标记？

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

- sms247

Answer 1

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

- Kyle

---

这仅适用于SVG格式中的自定义符号，并因此需要路径。 - Jonny

要更新现有图标的旋转角度，您需要调用setter，例如 myMarker.icon.rotation++;myMarker.setIcon(myMarker.icon)。 - Sam Barnum

Answer 2

API参考没有明确说明如何完成旋转，但由于path接受一个SVG元素，我认为这就是他们实现旋转的方式。如果你使用SVG创建自定义标记，可以很容易地使用transform="rotate(deg centerX centerY")来旋转它。

- Karl-Johan Sjögren

---

谢谢，我找到了这个符号路径，它是一个内置的符号路径，或者使用SVG路径表示的自定义路径。 - sms247

准确地说，你可以使用它来添加自己的SVG符号。以下是所需语法的示例。http://stackoverflow.com/questions/13125289/how-do-i-indicate-transparency-in-an-svg-path-in-google-maps-api-v3 - Karl-Johan Sjögren

在上面的例子中，我们没有其他方法可以旋转任何自定义图像吗？您可以编写自定义图像的url：“路径”，但它不会旋转。 - Salman

有几种方法可以考虑，主要使用canvas或css3 transforms，但浏览器的支持（特别是旧版本）差异相当大。 - Karl-Johan Sjögren

Answer 3

您可以使用以下函数旋转图像，element是图像，degree是您想要旋转的角度，零度是箭头指向北方：

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

---

您的代码已经过时了。Firefox（16+）和IE（10+）不再使用前缀，而Opera 15+则使用webkit前缀。 - Spinal

@Chen：抱歉，我无法理解您的意思。我必须多次使用该自定义标记，并且它们方向不同。 - sms247

你如何获取标记元素？ - Arturo Torres Sánchez

这段代码已经过时了。请参考此答案了解原因。 - Raman Sahasi