Google Maps添加地图点击事件实现标记替换功能求助

嘿，我明白你想实现点击地图任意位置就替换掉原来的标记，同时更新经纬度和地址信息对吧？你的现有代码已经实现了拖动功能，但点击地图的逻辑没生效主要有两个原因：一是原来的marker是initialize函数里的局部变量，外部的点击监听器访问不到；二是没有正确处理旧标记的移除和新标记的事件绑定。

我帮你修改了代码，现在可以完美实现点击地图替换标记的功能，同时保留原来的拖动逻辑：

<div id="map" style="height: 500px;"> </div> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script> 
<script type="text/javascript"> 
var geocoder = new google.maps.Geocoder();
// 把marker变量提升到全局作用域，让点击地图的监听器能访问到
var marker;

function geocodePosition(pos) { 
  geocoder.geocode({ latLng: pos }, function(responses) { 
    if (responses && responses.length > 0) { 
      updateMarkerAddress(responses[0].formatted_address); 
    } else { 
      updateMarkerAddress('Cannot determine address at this location.'); 
    } 
  }); 
} 

function updateMarkerStatus(str) { 
  document.getElementById('markerStatus').innerHTML = str; 
} 

function updateMarkerPosition(latLng) { 
  document.getElementById('pdb-longitude').value = latLng.lng(); 
  document.getElementById('pdb-latitude').value = latLng.lat(); 
  document.getElementById('info').innerHTML = [ latLng.lat(), latLng.lng() ].join(', '); 
} 

function updateMarkerAddress(str) { 
  document.getElementById('address').innerHTML = str; 
} 

// 封装绑定标记拖动事件的函数，避免重复代码
function bindMarkerEvents(targetMarker) {
  google.maps.event.addListener(targetMarker, 'dragstart', function() { 
    updateMarkerAddress('Dragging...'); 
  }); 

  google.maps.event.addListener(targetMarker, 'drag', function() { 
    updateMarkerStatus('Dragging...'); 
    updateMarkerPosition(targetMarker.getPosition()); 
  }); 

  google.maps.event.addListener(targetMarker, 'dragend', function() { 
    updateMarkerStatus('Location successfully Recorded ! Fill in the form below'); 
    geocodePosition(targetMarker.getPosition()); 
  });
}

function initialize() { 
  var latLng = new google.maps.LatLng(49.691219873776326, -112.83338917980956); 
  var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 13, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  }); 

  // 初始化标记
  marker = new google.maps.Marker({ 
    position: latLng, 
    title: 'Point A', 
    map: map, 
    draggable: true 
  }); 

  // 绑定拖动事件
  bindMarkerEvents(marker);

  // Update current position info. 
  updateMarkerPosition(latLng); 
  geocodePosition(latLng); 

  // 添加地图点击事件监听器
  google.maps.event.addListener(map, 'click', function(e) {
    // 移除旧标记
    if (marker) {
      marker.setMap(null);
    }
    // 创建新标记，位置为点击的坐标
    marker = new google.maps.Marker({
      position: e.latLng,
      title: 'Point A',
      map: map,
      draggable: true
    });
    // 给新标记绑定拖动事件
    bindMarkerEvents(marker);
    // 更新位置信息和地址
    updateMarkerPosition(e.latLng);
    geocodePosition(e.latLng);
    updateMarkerStatus('Location successfully Recorded ! Fill in the form below');
  });
} 

// Onload handler to fire off the app. 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<div id="infoPanel"> 
  <b>Location status:</b> 
  <div id="markerStatus"><i>Click and drag the marker, or click anywhere on the map to move it.</i></div> 
  <b>Current position:</b> 
  <div id="info"></div>
  <b>Address:</b>
  <div id="address"></div> 
</div>

关键修改点说明： #

• 全局marker变量：把marker从initialize函数内部移到全局，这样地图点击事件的回调函数可以访问并操作它。
• 封装拖动事件绑定函数：把原来重复的拖动事件代码封装成bindMarkerEvents函数，不管是初始化的标记还是点击创建的新标记，都能快速绑定相同的拖动逻辑，避免代码冗余。
• 地图点击事件处理：
  1. 先检查是否存在旧标记，若存在则调用marker.setMap(null)将其从地图上移除（这是Google Maps移除标记的标准方法）。
  2. 创建新的标记，设置位置为点击事件返回的e.latLng。
  3. 给新标记绑定拖动事件，同时立即更新位置信息和地址，同步状态。

这样修改后，你点击地图任意位置，旧标记就会消失，新标记出现在点击位置，同时文本框和信息面板里的经纬度、地址都会自动更新，拖动新标记的功能也和之前一样正常工作。

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