如何在google地图api v3地图中为鼠标光标设置自定义图像 [英] How do i set a custom image for the mouse cursor in a google map api v3 map

问题描述

我想在将鼠标悬停在网页上的google地图组件上时拥有自定义光标。我想能够编程地将光标更改为自定义图像，然后将其更改回默认光标。

I want to have a custom cursor while moused over the google map component on the page. I'd like to be able to programatically change the cursor to the custom image, then change it back to the default cursor.

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

I believe this is how you set the default cursor on your 'map' object

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

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

After some research and experimentation, i found the best way to do this was as follows:

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

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

in css, only webkit supports a url value for the cursor attribute, so other browsers get the value of 'crosshair' in this case which solved my problem of needing to inform the users that they need to click on the map.

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

for more information on the draggableCursor attribute, please see the google maps api v3 documentation here: http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions

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

Hopefully this helps someone who is having trouble setting a custom cursor on a google map.

推荐答案

在mac上，它可以在chrome，safari和firefox上正常工作。

On mac it work perfectly on chrome, safari and firefox.

我只需使用：

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

ps：I阅读某处，你需要你的图像在64x64在某些浏览器。永远不要尝试，但也许你的问题是从那里来的。

ps: I read somewhere that you need your image to be under 64x64 on certain browser. Never have to try but maybe your problem is coming from that.

这篇关于如何在google地图api v3地图中为鼠标光标设置自定义图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！