我正在使用谷歌地图 API 3 和自定义叠加层 (OverlayView) 我有这个代码:
请将鼠标悬停在制造商上以查看工具提示叠加层。
我怎样才能精确定位标记附近的工具提示弹出窗口(黄色窗口)?。我的 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'
}
});
});
}
以防万一有人在寻找答案,我想到了这样做:
// 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];
我希望它能帮助别人,我花了相当多的时间
我已经更新它并开始工作,删除在:“右中心”,我的:“左中心”,希望你想要那个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 上找到。希望对你有帮助。
如果有人正在使用 @react-google-maps/api 中的 OverlayView 组件寻找 React 的解决方案
组件上有一个 props 给我们偏移宽度/高度。 例如,如果您有自定义标记,您可以这样使用:
<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
希望对您有所帮助!