Google Maps v3标记图像和jQuery.Rotate

Question

我有以下代码，它是在Google Maps V3上的自定义图标。 我想使用jQuery.Rotate插件旋转它。

var image = new google.maps.MarkerImage(
    "markers/test.png",
    new google.maps.Size(52, 52), // size
    new google.maps.Point(0, 0), // origin
    new google.maps.Point(20, 0) // anchor
);


marker = new google.maps.Marker(
{
    map: map,
    draggable: false,
    position: markerData[i].latLng,
    visible: true,
    icon: image,
    optimized: false
});

问题是jQuery.Rotate要求使用DOM id来识别要旋转的元素。Markerimage没有id，我无法指定它。

例如：

<img src="img" id="image">
$("#image").rotate(15);

有没有人能给我展示一些示例代码，让我可以将id分配给MarkerImage，以便jQuery.Rotate可以使用它，例如#image（假设id =“image”），或者有没有其他方法告诉jQuery.Rotate使用MarkerImage而不是指向DOM元素？

任何帮助都将不胜感激...如果我找不到这个答案，我将需要为我使用的每个图标创建360版本，其中有很多。我更喜欢使用这个特定的插件。希望有一个简单的答案。

- gleff

---

如果有人能够协助处理这个问题，将不胜感激。如果有更简单的方法，我真的不想创建成百上千个图标。 - gleff

你看过这个吗？https://dev59.com/3nI95IYBdhLWcg3w-DL0 - Stephan

Answer 1

我不能提供一个“答案”，只能给你一些提示和观察。

假设你的地图是一个名为“map”的DOM对象，请查看DOM对象map.l.innerContainer.outerHtml。（小写字母“l”- map.l）

在outerHtml中，除了许多其他的div之外，你应该能够找到一个包含你的图标img文件的div。

我也想做和你一样的事情，即实时旋转图标，但我还没有找到时间来看看是否可以找到一种方法来给这些div添加id以便于使用jquery来旋转它们。这些div是由API创建的。

有一些DOM变异事件（如DOMNodeInsertedIntoDocument）在文献中有描述，但显然它们的实现不可靠/不平衡，并且听起来它们已经从W3C规范中删除了。我还没有尝试过其中的任何一个，所以无法从个人经验中发表评论。

在我的情况下，我只是决定为每个基本方向创建图标文件，N NNE NE ENE等等。对于我的应用程序来说，这似乎足以使图标对齐得很好，看起来还不错。

如果你成功了，请在这里分享你的解决方案，让其他人也受益。

- RoyHB

---

非常感谢你。这个周末我会更深入地研究它。 - gleff