如何通过Google Map拖拽事件获取固定Marker的经纬度

嘿，你的思路已经找对方向啦！通过监听地图的center_changed事件让Marker跟着地图中心移动，同时保持Marker不可拖拽（你的代码里没设置draggable: true，默认就是固定状态，刚好符合需求）。下面我帮你调整代码，加上获取经纬度的具体逻辑：

修改后的完整代码 #

function initialize() { 
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
  var mapOptions = { 
    center: myLatlng, 
    zoom: 8 
  }; 
  var map = new google.maps.Map(document.getElementById("sample"), mapOptions); 
  var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: '',
    draggable: false // 显式设置为不可拖拽，确保Marker完全固定
  }); 

  google.maps.event.addListener(map, 'center_changed', function() { 
    window.setTimeout(function() { 
      var center = map.getCenter(); 
      marker.setPosition(center);
      
      // 获取Marker的经纬度（此时和地图中心坐标完全一致）
      var latitude = marker.getPosition().lat();
      var longitude = marker.getPosition().lng();
      
      // 这里可以按你的需求处理经纬度，比如打印到控制台
      console.log("当前Marker经纬度：纬度 " + latitude + "，经度 " + longitude);
      
      // 也可以显示在页面元素中，比如页面有个id为"coord-display"的div
      // document.getElementById("coord-display").textContent = "纬度：" + latitude + " | 经度：" + longitude;
    }, 100); 
  }); 
} 

google.maps.event.addDomListener(window, 'load', initialize);

关键细节说明 #

• 我特意添加了draggable: false到Marker配置里，虽然默认就是不可拖拽，但这样代码更直观，能明确Marker的固定状态。
• 在地图中心更新后，通过marker.getPosition().lat()和marker.getPosition().lng()就能拿到经纬度，你可以把这两个值用于打印、页面展示或者提交到后端等场景。
• 延迟100ms的设置是为了等地图拖拽动作结束后再更新Marker位置，避免拖拽过程中频繁触发更新，提升交互流畅度。

内容的提问来源于stack exchange，提问作者JIJOMON K.A