如何在Google Maps Javascript API v3中旋转标记图标图片

Question

我试图旋转标记图标图像，但旋转角度似乎对图标图像的方向没有任何影响。

我发现，为标记提供svg路径而不是图像会使旋转按预期工作。

但在使用图像时有没有办法使旋转工作？

问题的jsfiddle

function updateMap(bearing) {
// var bearing = 135;

console.log(bearing);
var icon = marker.getIcon();
icon.rotation = bearing;
marker.setIcon(icon);

console.log(marker);
}
function initialize() {
   initMap({ Latitude:37.4419, Longitude: -122.1419});
}

- devN

---

jsfiddle似乎可以工作，问题出在哪里？ - Matteo Errera

@MatteoErrera 哎呀，我贴了个错链接。现在已经修改了。问题是旋转对汽车图像没有影响。 - devN

你有一个支持PHP的服务器（允许使用PHP的托管服务）吗？然后你可以使用如下图标：{url: 'img.php?rot=135'}，接着利用PHP中的GD库来将图片旋转$_GET['rot']度（在本例中为135度）。 - Emmanuel Delay

您无法旋转自定义图像。参考 https://developers.google.com/maps/documentation/javascript/3.exp/reference#Symbol符号的路径是内置符号路径或使用SVG路径表示的自定义路径。必填。要执行此操作，需要使用SVG（可缩放矢量图形）创建图像。 - saravana

概念验证 fiddle（需要 jQuery，但可以在没有它的情况下实现） - geocodezip

更新了概念验证fiddle。 - geocodezip

Answer 1

当您提供像那样的图像URL时，无法执行此操作。

根据文档：

“如果提供了字符串，则将其视为具有该字符串作为URL的图标。” Icon class 没有 rotate 方法。只有 Symbol 可以这样做。

- duncan

---

我正在使用符号图标作为标记，但是一开始可以旋转标记，但之后，当通过props更改其旋转值时，它仍然保持不变。请在https://stackoverflow.com/q/51030431/3574669上帮助解决我的问题。 - Ajay