Google Maps API标记坐标获取异常：无法用getPosition()填充HTML表单

嘿，我来帮你搞定这个getPosition()调用失效的问题！大概率是你没正确拿到标记的实例，或者调用时机不对，咱们一步步调整：

第一步：把标记实例存成可访问的变量 #

首先，你得把创建的标记存到全局变量（或者能在需要的地方访问到的变量）里，不然调用getPosition()的时候找不到对应的标记对象。比如：

// 先声明全局变量存标记
let mapMarker;

// 初始化地图的函数里，把标记赋值给这个变量
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });

  // 创建标记时存到全局变量
  mapMarker = new google.maps.Marker({
    position: { lat: -34.397, lng: 150.644 },
    map: map,
    draggable: true, // 如果需要拖动标记更新坐标，一定要开这个！
  });
}

第二步：获取坐标并填充表单 #

接下来，你需要一个触发时机来获取坐标——比如标记拖动结束自动填充，或者点击按钮手动填充：

方式1：标记拖动结束自动填充 #

给标记加个dragend事件，拖动完就自动把坐标填到表单里：

// 监听标记拖动结束事件
mapMarker.addListener('dragend', function() {
  const markerPosition = mapMarker.getPosition();
  // 把经纬度分别填到对应的输入框
  document.getElementById('inputlng').value = markerPosition.lng();
  // 假设你有个纬度输入框，id是inputlat
  document.getElementById('inputlat').value = markerPosition.lat();
});

方式2：按钮点击手动填充 #

如果需要手动触发，写个函数绑定到按钮上：

function fillFormCoordinates() {
  // 先检查标记是否已创建
  if (!mapMarker) {
    alert("还没创建标记哦！先在地图上添加标记吧～");
    return;
  }
  const markerPosition = mapMarker.getPosition();
  // 填充输入框
  document.getElementById('inputlng').value = markerPosition.lng();
  document.getElementById('inputlat').value = markerPosition.lat();
}

对应的HTML表单也要补全纬度输入框，加上触发按钮：

<form action="send_nieuwcontainer.php" method="post">
  Marker_name: <input type="text" name="markername"><br>
  Coördinaten: <br>
  Lat: <input id="inputlat" type="text" placeholder="纬度"><br>
  Lng: <input id="inputlng" type="text" placeholder="经度"><br>
  <!-- 绑定手动填充的按钮 -->
  <button type="button" onclick="fillFormCoordinates()">填充坐标</button>
  <input type="submit" value="提交">
</form>

避坑提醒 #

• 一定要确保调用getPosition()时，标记已经被初始化！不能在initMap()执行前就调用填充函数。
• getPosition()返回的是LatLng对象，必须用lng()和lat()方法获取数值，不能直接写markerPosition.lng（这是错的！）。
• 如果是用户点击地图创建标记，记得在点击回调里把新标记赋值给全局变量mapMarker，比如：

map.addListener('click', function(e) {
  // 移除之前的旧标记（如果有的话）
  if (mapMarker) mapMarker.setMap(null);
  // 创建新标记并赋值
  mapMarker = new google.maps.Marker({
    position: e.latLng,
    map: map,
    draggable: true
  });
  // 点击后直接填充坐标
  document.getElementById('inputlat').value = e.latLng.lat();
  document.getElementById('inputlng').value = e.latLng.lng();
});

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