如何在Google Map中按固定像素距离相对于自身位置添加标记？

这个需求我之前做项目时刚好遇到过——本质上是要在屏幕像素坐标系和Google Maps的地理经纬度坐标系之间做转换，因为Google Maps的标记只能绑定经纬度，直接固定像素是不行的。下面给你一步步拆解解决方案：

核心逻辑是：把用户的地理坐标转成屏幕像素，按像素偏移后再转回地理坐标，并且在地图缩放/移动时重新计算，保证标记始终在你想要的屏幕位置。

1. 获取地图投影（Projection） #

地图投影是连接屏幕像素和地理坐标的关键，它能帮你在两种坐标系之间互相转换。不同平台的API获取投影的方式略有不同，但核心都是拿到当前地图的投影实例。

2. 转换用户位置到屏幕像素 #

用投影工具把你当前的LatLng位置转换成屏幕上的像素点（比如Point对象，包含x、y坐标）。

3. 计算目标标记的像素位置 #

根据你的需求，给当前像素点加上固定偏移量：比如想在屏幕右侧150像素，就把x坐标加150；想在下方80像素，就把y坐标加80。

4. 转回到地理坐标 #

把计算好的目标像素点再转回LatLng，用这个经纬度创建或更新标记。

5. 监听地图变化，实时更新 #

因为每次缩放、平移地图时，投影关系都会变化，所以必须监听地图的相机变化事件（比如camera_changed、cameraIdle），每次触发时重新计算标记位置并更新。

代码示例（JavaScript版） #

假设你已经初始化了Google Maps实例，并且有用户的当前位置：

// 地图实例和用户位置
const map = new google.maps.Map(document.getElementById('map'), {
  zoom: 17,
  center: userLatLng // 用户当前的LatLng
});
const userLatLng = new google.maps.LatLng(37.7749, -122.4194); // 示例坐标

// 用于存储固定像素标记
let fixedPixelMarker;

// 核心更新函数
function updateMarkerPosition() {
  const projection = map.getProjection();
  if (!projection) return; // 地图未完全加载时跳过

  // 用户位置转屏幕像素
  const userScreenPoint = projection.fromLatLngToPoint(userLatLng);
  
  // 计算目标像素（示例：向右200px，向下50px）
  const targetPoint = new google.maps.Point(
    userScreenPoint.x + 200,
    userScreenPoint.y + 50
  );
  
  // 转回经纬度
  const targetLatLng = projection.fromPointToLatLng(targetPoint);
  
  // 创建或更新标记
  if (fixedPixelMarker) {
    fixedPixelMarker.setPosition(targetLatLng);
  } else {
    fixedPixelMarker = new google.maps.Marker({
      position: targetLatLng,
      map: map,
      title: "Fixed Pixel Offset"
    });
  }
}

// 初始化时执行一次
updateMarkerPosition();

// 监听地图变化，实时更新
map.addListener('camera_changed', updateMarkerPosition);

注意事项 #

• 地图加载时机：确保在地图完全初始化后再调用转换方法，否则投影可能为空（比如在idle事件里初始化更稳妥）。
• 平台差异：Android/iOS的API方法名略有不同，比如Android用Projection.toScreenLocation()和Projection.fromScreenLocation()，逻辑是一样的。
• 性能优化：如果频繁触发camera_changed，可以加防抖处理，避免过度计算。

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