jquery 谷歌Map：如何将OverlayView准确定位在标记上？

6l7fqoea 于 2023-03-17 发布在 jQuery

关注(0)|答案(3)|浏览(131)

我使用谷歌MapAPI 3和自定义覆盖（OverlayView）我有这样的代码：
http://jsfiddle.net/8X6cY/1/
请用鼠标悬停maker以查看工具提示覆盖.
我怎样才能精确地将工具提示弹出窗口（黄色窗口）定位在标记附近？。我的X，Y想法不起作用，因为它与Map有关，因此如果页面的布局是流动的，我的解决方案（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'
        }
    });

  });
}

jquery

来源：https://stackoverflow.com/questions/9242786/google-maps-how-to-position-overlayview-accurately-over-a-marker

3条答案

按热度按时间

pnwntuvh1#

以防有人想知道答案，我就这么说：

// 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];

我希望这能帮到什么人，这花了我相当多的时间

赞(0）回复(0）举报 2023-03-17

w8f9ii692#

我已经更新了它和工作，删除：“右中”，我的：“左中”，希望你想要那个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);

现在通过SO上的pidox和pidoy.访问你的像素坐标。希望它能帮助你。

赞(0）回复(0）举报 2023-03-17

wnrlj8wa3#

如果有人正在寻找一个解决方案的React使用覆盖视图组件从@react-google-maps/API。
组件上有一个 prop ，可以给我们偏移宽度/高度。例如，如果你有一个自定义标记，你可以像这样使用：

<OverlayViewF
    ...your_props
    getPixelPositionOffset={GetPixelPositionOffset}
>
  <your_components>
</OverlayViewF>

所述方法

const GetPixelPositionOffset = (width: number, height: number) => {
  return {
    x: -(width / 2),
    y: -(height / 2)
  };
};

可用作辅助函数，返回基于中心点的标测图标记在x和y轴上的准确位置（基本上可命名为基于宽度/高度的标记平移）
在文档中发现：https://react-google-maps-api-docs.netlify.app/#overlayview
希望能有所帮助！

赞(0）回复(0）举报 2023-03-17

我来回答

jquery 谷歌Map：如何将OverlayView准确定位在标记上？

3条答案

相关问题

热门标签

最新问答