20

当鼠标悬停在标记上时，我想用 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 方法失败了。任何的想法？

4

7 回答 7

18

这是一个棘手的问题。在 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_);

您可以阅读 Google 关于自定义叠加层的教程或复制他们的示例以帮助您入门。

于 2010-04-28T07:20:27.787 回答
10

这是我刚刚创建的关于如何为 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/

于 2012-02-03T03:21:46.240 回答
5

infowindow旨在解决这个问题。 http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

于 2011-11-04T14:01:24.223 回答
4

不知何故，没有其他答案对我有用，或者我不想实现它们（例如，创建自己的自定义标记类）。

不过，经过更多搜索后，我发现了这个解决方案，这正是我们所需要的：

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());并使用该位置即可：-)

于 2013-04-24T21:29:17.113 回答
1

在使用此处的方法拖动地图或创建虚拟叠加视图并使用其投影后，我无法更新投影。我在这里找到了一个 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; 
};
于 2011-09-09T19:59:46.320 回答
0

在另一篇文章中找到了解决方案：

var point = gmap.getProjection().fromLatLngToPoint(marker.getPosition())
于 2010-10-06T18:52:54.410 回答
0

如果您MarkerWithLabel用于渲染标记，则可以在鼠标悬停时轻松使用其label属性显示额外数据

  google.maps.event.addListener(marker, 'mouseover', function (ev) {
    this.labelContentOld = this.labelContent
    this.set("labelContent", this.id + ' ' + this.labelContent)
  })
  google.maps.event.addListener(marker, 'mouseout', function (ev) {
    this.set("labelContent", this.labelContentOld)
  })
于 2020-07-25T18:54:18.793 回答