Google使用onclick侦听器进行映射

Question

此地图上的onclick侦听器出现问题。我希望当用户单击地图时，添加一个新标记并记录经度和纬度，然后更新信息。现在，添加一个新标记而不是替换现有标记会做什么。如果有人可以提供帮助，我将不胜感激。

谢谢。代码如下：

<div id="map" style="height: 500px;"> </div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyApiKey&callback=initMap"></script>
<script type="text/javascript">

var geocoder = new google.maps.Geocoder();
var map;  
var markers = [];

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();
}

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

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

 function setMapOnAll(map) {  
  for (var i = 0; i < markers.length; i++) {  
    markers[i].setMap(map);  
  }  
} 
  
  function showMarkers() {  
  setMapOnAll(map); 
    addMarker(latLng);  
}  
  
  function clearMarkers() {  
  setMapOnAll(null);  
}  


function initialize() {
    
  var minZoomLevel = 13;
  
  var latLng = new google.maps.LatLng(49.691219873776326, -112.83338917980956);
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: minZoomLevel,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
   var marker = new google.maps.Marker({  
    position: latLng,
     draggable: true,  
    map: map  
  });
  
  var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(49.63987509237867, -112.853138917980956),
 new google.maps.LatLng(49.731199873776326, -112.82058917980956));
 
 
function addMarker(location, map) {  
  var marker = new google.maps.Marker({  
    position: location,
     draggable: true,  
    map: map  
  });  
  markers.push(marker);
  geocodePosition(marker.getPosition());
  updateMarkerPosition(marker.getPosition());

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

  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
  });

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

  google.maps.event.addListener(marker, 'dragend', function() {
    nupdateMarkerStatus('Location successfully Recorded ! Fill in the form below');
    geocodePosition(marker.getPosition());
 });
 
  // This event listener will call addMarker() when the map is clicked.  
  google.maps.event.addListener(map, 'click', function(event) { 
  //  showMarkers();  
    clearMarkers();
    addMarker(event.latLng, map);
	updateMarkerPosition(marker.getPosition());
    geocodePosition(marker.getPosition());
  });

 
 
 // Listen for the dragend event
 google.maps.event.addListener(map, 'dragend', function () {
  if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
     
 //    marker.setPosition(c);
     
    
 });
 
  // Limit the zoom level
 google.maps.event.addListener(map, 'zoom_changed', function () {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
 });
}

// 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.</i></div>
    <b>Current position:</b>
    <div id="info"></div>
    <b>Closest matching address:</b>
    <div id="address"></div>
</div>
<br>