如何让两个Google Maps标记保持固定像素距离

核心思路 #

由于纬度与垂直像素位置并非线性关系，直接在经纬度层面加减偏移会导致不同缩放级别或地图位置下标记重叠。正确的做法是通过地图投影实现经纬度与屏幕像素坐标的互转，在像素层面调整标记位置后再转回经纬度，从根源上避免重叠问题。

具体实现步骤 #

1. 获取地图中心的经纬度与屏幕坐标 #

先获取当前地图中心的经纬度，再通过地图API的投影方法将其转换为屏幕像素坐标（包含x、y像素值）。以Google Maps为例：

const projection = map.getProjection();
const centerLatLng = map.getCenter();
const centerPoint = projection.fromLatLngToPoint(centerLatLng);

2. 在像素层面设置标记偏移 #

根据需求的布局（左右/上下排列），给两个标记设置固定的像素偏移量，偏移值需大于标记图标的半宽/半高，确保屏幕层面无重叠。例如：

• 标记1：中心左侧30像素 → {x: centerPoint.x - 30, y: centerPoint.y}
• 标记2：中心右侧30像素 → {x: centerPoint.x + 30, y: centerPoint.y}

3. 将偏移后的像素坐标转回经纬度 #

把调整后的像素坐标通过投影转换回经纬度，得到两个标记的最终定位：

// 标记1的经纬度
const marker1LatLng = projection.fromPointToLatLng(new google.maps.Point(centerPoint.x - 30, centerPoint.y));
// 标记2的经纬度
const marker2LatLng = projection.fromPointToLatLng(new google.maps.Point(centerPoint.x + 30, centerPoint.y));

4. 监听地图变化，动态更新标记位置 #

地图缩放、拖拽后中心位置会改变，需监听zoom_changed和dragend事件，每次触发时重新计算标记位置：

map.addListener('zoom_changed', updateMarkerPositions);
map.addListener('dragend', updateMarkerPositions);

function updateMarkerPositions() {
  // 重复步骤1-3的逻辑，更新两个标记的位置
}

注意事项 #

• 不同地图API的投影方法命名有差异，比如Leaflet中对应map.latLngToContainerPoint()和map.containerPointToLatLng()，但核心逻辑一致。
• 偏移像素值需根据标记图标的实际尺寸调整，确保偏移量足够覆盖图标的一半宽度/高度，彻底避免重叠。

内容的提问来源于stack exchange，提问作者massic80