如何在 google map api v3 地图中为鼠标光标设置自定义图像？

Question

我希望将鼠标悬停在页面上的 Google 地图组件上时有一个自定义光标。我希望能够以编程方式将光标更改为自定义图像，然后将其更改回默认光标。

我相信这就是您在“地图”对象上设置默认光标的方式：

 map.setOptions({ draggableCursor: 'default' });

经过一些研究和实验，我发现最好的方法如下：

 map.setOptions({ draggableCursor: 'url(path/to/your/image.png), crosshair' });

在css中，只有webkit支持cursor属性的url值，因此在这种情况下其他浏览器会获取“crosshair”的值，这解决了我需要通知用户他们需要点击地图的问题。

有关draggableCursor属性的更多信息，请参阅此处的Google Maps API v3文档：http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions

希望这可以帮助那些在谷歌地图上设置自定义光标时遇到问题的人。

如何在 Google Maps API v3 地图中为鼠标光标设置自定义图像？

Answer 1

在 Mac 上，它可以在 Google、Safari 和 Firefox 中完美运行。

我只是用这个：

map.setOptions({ draggableCursor : "url(http://s3.amazonaws.com/besport.com_images/status-pin.png), auto" })

PS：我在某处读到，在某个浏览器中，您需要图像低于 64x64。我从来不需要尝试，但也许你的问题就是由此而来。

Answer 2

对于那些希望将 SVG 设置为可拖动光标的人。解决方案如下。

 map.setOptions({ draggableCursor : "url(PATH_TO_YOUR_SVG.svg), pointer" });

相信我，这是可能的。

Answer 3

要返回默认光标，您可以将 undefined 分配给draggableCursor 变量：

map.setOptions({draggableCursor: undefined})