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

Question

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

我相信这就是你在'map'对象上设置默认光标的方法

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

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

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

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

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

希望这有助于在Google地图上设置自定义光标时遇到问题的人。

Answer 1

在Mac上它完全适用于chrome，safari和firefox。

我只是用这个：

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

ps：我在某处读到某些浏览器需要你的图片在64x64以下。永远不必尝试，但也许你的问题来自于此。

Answer 2

要返回默认光标，您可以将undefined分配给可拖动的Cursor变量：

map.setOptions({draggableCursor: undefined})

Answer 3

对于那些希望将SVG设置为draggableCursor的人。我们的解决方案如下。

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

相信我的可能性。