如何在 google 地图 api v3 地图中为鼠标光标设置自定义图像？
我希望将鼠标悬停在页面上的 Google 地图组件上时有一个自定义光标。我希望能够以编程方式将光标更改为自定义图像，然后将其更改回默认光标。
我相信这就是您在“地图”对象上设置默认光标的方式：
map.setOptions({ draggableCursor: 'default' });
经过一些研究和实验，我发现执行此操作的最佳方法如下：
map.setOptions({ draggableCursor: 'url(path/to/your/image.png), crosshair' });
在 CSS 中，仅 WebKit 支持光标属性的 URL 值，因此在这种情况下其他浏览器会获取“十字准线”的值，这解决了我需要通知的问题他们需要的用户单击地图。
有关 DraggableCursor 属性的详细信息，请参阅此处的 Google Maps API v3 文档：Google Maps JavaScript API V3 参考，MapOptions 界面。
希望这可以帮助那些在 Google 地图上设置自定义光标时遇到问题的人。
如何在 Google Maps API v3 地图中为鼠标光标设置自定义图像？
I want to have a custom cursor while moused over the Google Maps component on the page. I'd like to be able to programmatically change the cursor to the custom image, and then change it back to the default cursor.
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' });
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.
For more information on the draggableCursor attribute, please see the Google Maps API v3 documentation here: Google Maps JavaScript API V3 Reference, MapOptions interface.
Hopefully this helps someone who is having trouble setting a custom cursor on a Google Maps map.
How do I set a custom image for the mouse cursor in a Google Maps API v3 map?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在 Mac 上，它可以在 Google、Safari 和 Firefox 中完美运行。
我只是使用这个：
PS：我在某处读到您需要您的图像在某个浏览器中低于 64x64。我从来不需要尝试，但也许你的问题就是由此而来。
On Mac, it work perfectly in Google, Safari and Firefox.
I simply use this:
PS: I read somewhere that you need your image to be under 64x64 in a certain browser. I never have to try, but maybe your problem is coming from that.
对于那些希望将 SVG 图像设置为可拖动光标的人，解决方案如下。
相信我，这是可能的。
For those who are looking to set an SVG image as your draggableCursor, the solution is below.
Trust me, it’s possible.
要返回默认光标，您可以将未定义分配给draggableCursor变量：
To go back to the default cursor, you can assign undefined to the draggableCursor variable: