谷歌地图AdvancedMarkerElement拖动时保持直线移动的实现问题

问题背景 #

将Google Maps中的旧Marker替换为AdvancedMarkerElement后，原本实现的「标记沿直线拖动」功能失效。旧逻辑是在drag事件中计算并重置标记位置，但新组件拖动时标记会跟随光标移动，手动设置position无法生效。

问题原因 #

AdvancedMarkerElement的拖动机制与旧Marker不同：拖动过程中API会持续将标记位置同步到光标位置，在drag事件中直接设置position会被API的后续自动更新覆盖，导致自定义位置无法生效。

解决步骤 #

1. 引入几何库：确保加载Google Maps API时包含geometry库（用于计算地理坐标相关的投影、距离等），示例加载URL：

   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"></script>
   

2. 修改拖动事件逻辑：
   • 提前记录直线的起点和固定方位角；
   • 在drag事件中，获取当前光标位置，计算该点到目标直线的投影点（即标记应停留的直线位置）；
   • 将标记位置设置为计算出的投影点，确保标记始终落在指定直线上。

修正后的代码示例 #

// 初始化AdvancedMarkerElement
let ruler4 = new google.maps.marker.AdvancedMarkerElement({
  map: map,
  position: finalLatLng,
  content: pinTextGlyph.element,
  gmpClickable: true,
  gmpDraggable: true,
});

// 记录直线的起点（ruler2的位置）和固定方位角
const lineStart = ruler2.position;
const fixedAzimuth = azimuth;

// 监听拖动事件
ruler4.addListener('drag', (event) => {
  // 获取当前光标所在的地理坐标
  const cursorLatLng = event.latLng;
  
  // 计算光标位置到目标直线的投影点
  const projectedPoint = getProjectedPoint(lineStart, fixedAzimuth, cursorLatLng);
  
  // 设置标记位置为投影点
  ruler4.position = projectedPoint;
});

// 计算点到指定直线的投影点函数
function getProjectedPoint(startLatLng, azimuth, targetLatLng) {
  // 计算起点到光标位置的距离
  const distanceToCursor = google.maps.geometry.spherical.computeDistanceBetween(startLatLng, targetLatLng);
  // 计算起点到光标位置的方位角
  const cursorHeading = google.maps.geometry.spherical.computeHeading(startLatLng, targetLatLng);
  
  // 计算两个方位角的夹角，得到投影距离
  const angleDiff = google.maps.geometry.spherical.computeAngleBetween(azimuth, cursorHeading);
  const projectedDistance = distanceToCursor * Math.cos(angleDiff * Math.PI / 180);
  
  // 从起点出发，沿固定方位角移动投影距离，得到最终投影点
  return google.maps.geometry.spherical.computeOffset(startLatLng, projectedDistance, azimuth);
}

关键说明 #

• 替换原固定距离的getFinalPoint逻辑，改为根据光标位置动态计算直线上的投影点，确保拖动时标记位置随光标移动但始终落在指定直线上；
• 利用Google Maps几何库的API简化地理坐标计算，避免手动处理复杂的球面几何逻辑。

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