谷歌地图 v3 标记鼠标悬停工具提示
当鼠标悬停在标记上时,我想放置一个用 div 制作的工具提示,但我不知道如何获取屏幕位置以将 div 放在正确的位置,这是我的代码:
google.maps.event.addListener(marker, "mouseover", function() {
divover.css("left", marker.get("left"));
divover.css("top", marker.get("top"));
divover.css("display", "block");
});
google.maps.event.addListener(marker, "mouseout", function() {
divover.css("display", "none");
});
显然 get 方法失败了。有什么想法吗?
I want to put a tooltip made myself with divs when the mouse is over a marker, but I don't know how to get the screen position to put the div on the correct position, here is my code:
google.maps.event.addListener(marker, "mouseover", function() {
divover.css("left", marker.get("left"));
divover.css("top", marker.get("top"));
divover.css("display", "block");
});
google.maps.event.addListener(marker, "mouseout", function() {
divover.css("display", "none");
});
Obviously the get method fails. Any Idea?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
更多
发布评论
评论(7)
这是一个棘手的问题。在 API v2 中,您可以执行以下操作:
在 v3 中,方法 fromLatLngToContainerPixel 已移至 MapCanvasProjection 对象。要获取 MapCanvasProjection 对象,您需要在 OverlayView 对象上调用 getProjection。看起来Marker类是从OverlayView扩展而来的,但不幸的是它没有getProjection方法。我不知道为什么 - 可能值得提交一个错误。
我的方法是基于 OverlayView 创建自己的自定义标记类,因此它仍然具有 getProjection 方法:
您可以阅读 Google 的教程 自定义叠加层或复制其示例 帮助您入门。
This is a tricky one. In v2 of the API, you can do:
In v3, the method fromLatLngToContainerPixel has been moved to the MapCanvasProjection object. To get a MapCanvasProjection object, you need to call getProjection on an OverlayView object. It looks like the Marker class is extended from OverlayView, but unfortunately it doesn't have the getProjection method. I have no idea why - may be worth filing a bug.
The way I've done it is by creating my own custom marker class, based on OverlayView, so it still has the getProjection method:
You can read Google's tutorial on custom overlays or copy their example to get you started.
以下是我刚刚创建的关于如何为 Google Maps API V3 创建工具提示的教程的链接:http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript-api-v3/
要查看其实际效果,请转到此处 http://medelbou.com/demos/google-maps-tooltip/
Here is link to a tutorial I just created on how to create a tooltip for Google Maps API V3: http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript-api-v3/
To see it in action, go here http://medelbou.com/demos/google-maps-tooltip/
infowindow
就是为了解决这个问题而设计的。http://code.google.com/apis/maps/documentation /javascript/overlays.html#InfoWindows
infowindow
is designed to solve this problem.http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows
不知何故,其他答案都不适合我,或者我不想实现它们(例如创建您自己的自定义标记类)。
经过更多搜索后,我发现 这个解决方案,完全需要什么:
然后只需调用
varposition = latlngToPoint(map,marker.getPosition());
并使用随心所欲的位置:-)Somehow, none of the other answer worked for me or I didn't want to implement them (e.g. creating your own custom Marker class).
After some more searching I found this solution, though, that does exactly what's needed:
Then just call
var position = latlngToPoint(map, marker.getPosition());
and use the position to your heart's content :-)使用此处的方法拖动地图或创建虚拟叠加视图并使用其投影后,我无法更新投影。我在这里找到了一个 100% 适合我的解决方案: http://qfox.nl/notes/116
I was having trouble getting the projection to update after dragging the map using the method here or creating a dummy overlayview and using its projection. I found a solution that works 100% for me here: http://qfox.nl/notes/116
在另一篇文章中找到了解决方案:
Found a solution in another post:
如果您使用
MarkerWithLabel
来渲染标记,则可以轻松地使用其label
属性在鼠标悬停时显示额外的数据If you are using
MarkerWithLabel
to render markers, you could easily use itslabel
property to display extra data when mousing over