谷歌地图v3标记鼠标悬停工具提示
我想要把鼠标放在标记上时使用div自带的工具提示,但我不知道如何获取屏幕位置以将div放在正确的位置,这里是我的代码:谷歌地图v3标记鼠标悬停工具提示
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方法失败。任何想法?
这是一个棘手的问题。在API的V2,你可以这样做:
map.fromLatLngToContainerPixel(marker.getLatLng(), zoomLevel);
在v3中,该方法fromLatLngToContainerPixel已经移动到MapCanvasProjection对象。要获得MapCanvasProjection对象,您需要在OverlayView对象上调用getProjection。它看起来像Marker类是从OverlayView扩展的,但不幸的是它没有getProjection方法。我不知道为什么 - 可能值得提交一个错误。
的方式我所做的是通过创建自己的定制标记类,基于OverlayView的,所以它仍然有getProjection方法:
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
你可以阅读谷歌的教程custom overlays或复制其example让你开始。
实测值的溶液中another post:
var point = gmap.getProjection().fromLatLngToPoint(marker.getPosition())
这不会使屏幕像素相对于左上角。相反,它给了世界的协调。 – Hoque 2011-04-28 02:32:41
我是有麻烦的投影这里使用该方法拖动地图或创建一个虚拟OverlayView的和使用它的投影后更新。我发现,我在这里工作的100%的解决方案:http://qfox.nl/notes/116
/**
* @param {google.maps.Map} map
* @param {google.maps.LatLng} latlng
* @param {int} z
* @return {google.maps.Point}
*/
var latlngToPoint = function(map, latlng, z){
var normalizedPoint = map.getProjection().fromLatLngToPoint(latlng); // returns x,y normalized to 0~255
var scale = Math.pow(2, z);
var pixelCoordinate = new google.maps.Point(normalizedPoint.x * scale, normalizedPoint.y * scale);
return pixelCoordinate;
};
/**
* @param {google.maps.Map} map
* @param {google.maps.Point} point
* @param {int} z
* @return {google.maps.LatLng}
*/
var pointToLatlng = function(map, point, z){
var scale = Math.pow(2, z);
var normalizedPoint = new google.maps.Point(point.x/scale, point.y/scale);
var latlng = map.getProjection().fromPointToLatLng(normalizedPoint);
return latlng;
};
不完全确定为什么,但此解决方案对我无效,坐标依然关闭。然而,我发现这个解决方案:http:// a32。me/2012/03/position-custom-and-fancy-overlay-dialog-on-google-maps-v3/- 并且完美运作! – Oliver 2013-04-24 21:17:34
infowindow
是解决这一问题而设计的。 http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows
这是最实际的解决方案。我的意思是,如果你不想编码你自己的弹出信息。 – 2013-10-24 18:03:45
这里是链接到我只是在如何创建谷歌地图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/
欢迎来到Stack Overflow!虽然这可能在理论上回答这个问题,[这将是更可取的](http://meta.stackexchange.com/q/8259)在这里包括答案的重要部分,并提供供参考的链接。 – oers 2012-02-03 07:13:37
这很容易添加和运作良好markerclustererplus。 – johntrepreneur 2013-01-22 21:26:47
不知何故,没有其他答案为我工作,或者我不想实施它们(例如creating your own custom Marker class)。
经过一番搜索,我发现this solution,虽然,确实正是所需的内容:
function latlngToPoint(map, latLng) {
var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
var scale = Math.pow(2, map.getZoom());
var worldPoint = map.getProjection().fromLatLngToPoint(latLng);
var point = new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
return point;
}
然后,只需调用var position = latlngToPoint(map, marker.getPosition());
和使用位置,你的心脏的内容:-)
oops。很快就说了。它在某些情况下有效,而不是在其他情况下。有点令人困惑的变化。 – elrobis 2014-10-16 17:00:46
@elrobis:你是说你在我的回答中遇到问题吗?你在浏览器的JavaScript控制台中是否有任何错误?什么是破坏的行为? – Oliver 2014-10-17 12:15:30
啊嘿嘿。之后没有工作,但我已经关闭了这个页面。我做了一些愚蠢的事情,比如将'.x'值分配给'x'和'y'位置。而且因为我有一个以一个点为中心的测试图(所以'x'和'y'几乎相同),它似乎在工作,但它周围的点表现得很古怪。所以起初它似乎工作 - 我删除了评论 - 然后我检查了其他点,并认为我说了太早。后来当我发疯的时候,我意识到我会重用其中的一个价值观。 ::头巴掌:: smh ..:/ – elrobis 2014-10-17 14:14:24
感谢最后,我这样做了,但是我可以在两行代码中解决的问题非常复杂,并且花了我很多时间 – Santiago 2010-05-03 21:51:05
它应该更容易,所以我提交了这个bug:http://code.google.com/p/gmaps-api-issues/issues/detail?id = 2342 当(如果)它是固定的,'var point = marker.getProjection()。fromLatLngToDivPixel(marker.getPosition());' 应该工作。 – dave1010 2010-05-04 07:22:38