谷歌地图：如何在标记上准确定位 OverlayView？答案

【问题标题】：Google Maps: how to position OverlayView accurately over a marker?谷歌地图：如何在标记上准确定位 OverlayView？
【发布时间】：2012-02-11 18:23:30
【问题描述】：

我正在使用谷歌地图 API 3 和自定义叠加层 (OverlayView) 我有这个代码：

http://jsfiddle.net/8X6cY/1/

请用鼠标悬停制造商以查看工具提示覆盖。

如何精确定位标记附近的工具提示弹出窗口（黄色窗口）？我的 X,Y 想法不起作用，因为它与地图相关，因此如果页面的布局是流动的，我的解决方案 (X,Y) 毫无价值。

有什么想法吗？

  google.maps.event.addListener(marker, 'mouseover', function(event) {

    var pixel = latLngToPixel.getProjection().fromLatLngToContainerPixel(event.latLng);

    // Grab marker position
    var pos = [ pixel.x, pixel.y ];

    // Create the tooltip on a dummy div and store it on the marker
    marker.tooltip = $('<div />').qtip({
        content: {
            text: 'I\'m a replacement tooltip for the regular google one<br />New line<br /> new line<br />Newer line',
            title: {
                text: 'aaa',
                button: true
            }
        },
        position: {
            at: "right center",
            my: "left center",
            target: pos,
            container: $('#map_canvas')
        },
        show: {
            ready: true,
            event: false,
            solo: true
        },
        hide: {
            event: 'mouseleave unfocus'
        }
    });

  });
}

【问题讨论】：

工具提示是什么意思？就像当您将鼠标悬停在它上面时会在延迟后出现的小标签？还是像您单击图标时实际弹出的窗口一样？
如果您将鼠标悬停在任何市场上，您会看到一个黄色窗口，这就是我所说的工具提示
你想要它在哪里？直接通过google弹出？为什么？如果您想覆盖弹出窗口，为什么不将其从地图上移除并制作自定义叠加层。还是要将其放置在弹出窗口附近？
您好，谢谢！我想定位在标记附近。问题是我的布局是流动的，地图可能在“任何”位置，因此根据地图位置，如果我使用 X，Y 是没用的。谢谢！
看看Heera的评论。您现在将面临的最大问题是，如果您要为其显示工具提示的项目接近视口的极端，您需要使地图将项目移动到足以显示工具提示的焦点。您可以通过使用map.panToBounds 并为其提供标记的边界+ 工具提示，因为它是新的边界。不过，在您执行此操作之前，请仔细检查以确保边界在视口内，以节省不必要的调用

标签： jquery google-maps

【解决方案1】：

以防万一有人在寻找答案，我想出了这样做：

// getting marker x,y offset from left-top map
var pixel = latLngToPixel.getProjection().fromLatLngToContainerPixel(event.latLng);
// then get the map_canvas offset with jquery
var left = $('#map_canvas').offset().left;
var top = $('#map_canvas').offset().top;
// x,y position tooltip
var pos = [ pixel.x + left, pixel.y + top];

我希望它对某人有所帮助，这花了我相当多的时间

【讨论】：

【解决方案2】：

我已对其进行了更新并正常工作，删除了：“right center”，我的：“left center”，希望你想要http://jsfiddle.net/8X6cY/2/

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

var proj = overlay.getProjection();
var pos = marker.getPosition();
var p = proj.fromLatLngToContainerPixel(pos);

现在通过 p.x 和 p.y 访问您的像素坐标。在 SO 上找到。希望对你有帮助。

【讨论】：

谢谢！但这不是我要找的。我想将黄色弹出窗口定位在标记附近。问题是我的布局是流动的，MAP 可能位于“任何”位置，因此根据地图位置，X、Y 方法是无用的；例如：将身体填充并将其更改为 500px，那么您的解决方案将毫无价值。谢谢
顺便说一句，这是毫无价值的，因为弹出窗口会在顶部很远，而 MAP 会在很远的位置，谢谢
看看这个stackoverflow.com/questions/2674392/…
我未能成功地从stackoverflow.com/questions/2674392/… 实现 MBO 代码，它不返回标记位置，而且 X 包含 -180 偏移量，知道如何获取市场位置吗？