如何在谷歌地图中旋转标记？ [复制]答案

【问题标题】：How to rotate a marker in Google Maps? [duplicate]如何在谷歌地图中旋转标记？ [复制]
【发布时间】：2013-09-23 04:20:11
【问题描述】：

以下是旋转标记的代码，以及如何旋转自定义标记。有什么想法吗？

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

【问题讨论】：

标签： google-maps

【解决方案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,
  ...
});

【讨论】：

这仅适用于 SVG 格式的自定义符号，因此具有路径

【解决方案2】：

API reference 没有具体说明旋转是如何完成的，但由于path 采用了 SVG 元素，我想说这就是他们设法旋转它的方式。如果您使用 SVG 创建自定义标记，则可以使用 transform="rotate(deg centerX centerY") 轻松完成。

【讨论】：

谢谢，我找到了这个符号的路径，可以是内置的符号路径，也可以是使用SVG路径表示法表示的自定义路径。
正是如此，您可以使用它添加自己的 SVG 符号。这是所需语法的示例。 stackoverflow.com/questions/13125289/…
没有其他方法可以旋转任何自定义图像吗？在上面的示例中，您可以编写自定义图像的 url: 'path' 但它不旋转。
我想到了几种方法，主要使用canvas 或css3 transforms，但浏览器（尤其是旧浏览器）的支持差异很大。

【解决方案3】：

您可以使用以下函数来旋转图像，元素是图像，度数是您要旋转的角度，零是箭头朝北时：

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

最好的问候，

陈

【讨论】：

您的代码已过时。 Firefox (16+) 和 IE (10+) 不再使用前缀，Opera 15+ 使用 webkit 前缀。
@Chen：对不起，我无法找到你，我必须多次使用那个自定义标记，而且所有的方向都不相同。
如何获取标记元素？
此代码已过时。请参阅this answer 了解原因。