Question

我在添加新标记时删除用户添加的标记时遇到问题。我最初尝试使用右键单击方法，但我只希望用户能够一次创建一个标记。有人可以帮助我吗？

function addMarker(location){

marker = new google.maps.Marker({
    position: location,
    map: GlobalMap,
    draggable: true,
    animation: google.maps.Animation.DROP,
    clickable: true

});

var form = $("#form").clone().show();
var contentString = form[0];
infowindow = new google.maps.InfoWindow({
    content: contentString
});

google.maps.event.addListener(marker, 'click', function(){
    infowindow.open(GlobalMap,this);
});

infowindow.open(GlobalMap,marker);
markerPosition = marker.getPosition();

populateInputs(markerPosition);
google.maps.event.addListener(marker, "dragend", function (mEvent){
    populateInputs(mEvent.latLng);
});

google.maps.event.addListener(marker, 'rightclick', function(){
    marker.setMap(null)

});


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

function populateInputs(pos){
 document.getElementById("latitude").value=pos.lat()
 document.getElementById("longitude").value=pos.lng();
}

function clearOverlays(){
 for(var i = 0; i <markers.length; i++){
    markers[i].setMap(null);
 }
}

var markers= [];
var center= null;
var GlobalMap = null;
var marker = null;
var infowindow;
var geocoder = new google.maps.Geocoder();
window.onload = function() {
// Creating a reference to the mapDiv, which is defined in the host html    file
var mapDiv = document.getElementById('map');

// Creating a latLng for the center of the map, these coordinates set the   center of the initial map to the center of Springfield.
var latlng = new google.maps.LatLng(37.1950, -93.2861);

// Creating an object literal containing the properties 
// we want to pass to the map  
var options = {
  center: latlng,
  zoom: 11,                                     // This zoom level shows the OTO area.
  mapTypeId: google.maps.MapTypeId.ROADMAP      // We want to show the data on the road map, as opposed to the satellite view.
};

// Now Creating the map
GlobalMap = new google.maps.Map(mapDiv, options);
oto.setMap(GlobalMap);

$('#address').keypress(function(e){
    if(e.which==13){
        e.preventDefault();
        window.geocode();
    }
});
markers.push(marker);
google.maps.event.addListener(GlobalMap, "click", function (event)
{
    addMarker(event.latLng);
});

google.maps.event.addListener(marker, 'dragend', function(marker){
    var latLong = marker.latLng;
    $latitude.value = latLong.lat();
    $longitude.value = latLong.lng();
});

}

这是HTML：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Public Comment</title>
    <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=drawing&sensor=false"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript">

      var otoTableId = '1gPq1ryMpY1S_ovp6pIl0LvqDJkGNUUGShPpDCxtj';

      var GlobalMap = null;


      //var Urbanlayer = new google.maps.KmlLayer('http://www.ozarkstransportation.org/GIS/OTOBoundary.kml',{preserveViewport:true, suppressInfoWindows:true});


    </script>
    <script type="text/javascript" src="js/map.js"></script>

  </head>
  <body>
  <!-- Top Banner Bar !-->
  <button onclick="toggle_visibility('checkboxes')" style="float: right;">Toggle legend</button>
  <div id="banner"><a href="http://www.ozarkstransportation.org" target="_blank" title="OTO Home Page"><img src="http://www.ozarkstransportation.org/GIS/OTOgraphicSmall.jpg" border="none" height= "66"></a>
    <input type="text" id="address" class="form-control" placeholder="e.g., 205 Park Central East, Springfield MO" size="35">
    <span class="input-group-btn">
        <button onClick="window.geocode()" class="btn btn-success" value=>
            <span class="glyphicon glyphicon-map-marker"></span>Go
        </button>
    </span>
    <em id = "banner_text" align="absmiddle">Left click to drop a marker.<br> Right click to delete most recent marker.<br>Cancel to reset with no markers.</em>
  </div>

  <!-- The Google Map Window !-->
  <div id="map"></div>

  <!-- The Layer Toggle Window !-->
  <div id="checkboxes">
    <h3>Left click to drop a marker.<br> Right click to delete marker.<br>Cancel to reset with no markers.</h3>

    <br><input type="checkbox" id="NAME" checked="true" onClick="toggleOto()"/><i class="fa fa-minus"></i>OTO Boundary<br />

    <table bgcolor="#FFFFFF"><tr><td>
      <br>
      <!-- <center><b><font color="#000000">Use "add a marker" tool to leave comment.<br> Drag marker to desired location.</font></b></center> !-->
      <br>
      <center><font size="-1">
        <a href="http://www.ozarkstransportation.org" target="_blank" title="Open the OTO MPO Website">OTO MPO</a> |  
        <!-- #BeginDate format:Am1 -->August 20, 2015<!-- #EndDate --> | 
        <a target="_blank" href="http://www.ozarkstransportation.org/GIS/Disclaimer.pdf">Disclaimer</a>
      </font><br>
      <font size="-2">For best results view in Google Chrome</font><br></center> 
    </td></tr></table>
  </div>
  <!-- The Bottom Messaging !-->
  <div id="container">
  </div>
  <div id="entryform"> 
    <form role="form" id = "form">
        <iframe id ="myFrame" src="https://docs.google.com/forms/d/1EjeuI7ddocJIUr8RALi_WZIuqgQlfgVG9WMqvKR0lSw/viewform?embedded=true" width="500" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe> 
        <h4>Please copy and paste the Latitude and Longitude values into the above form.</h4>
        <div class="form-group">
            <label><b>Latitude</b></label>
            <input id ="latitude" type="text" class="form-control" name="lat"     `enter code here`placeholder="Latitude" required="yes">
        </div><br>
        <div class="form-group">
            <label><b>Longitude</b></label>
            <input id ="longitude" type="text" class="form-control" name="lng" placeholder="Longitude" required="yes">
        </div><br>
        <div class="form-group">
            <!-- <button class="btn btn-primary" id="submit-button">Submit</button> !-->
            <button class="btn btn-primary" id ="delete-button">Cancel</button>
        </div>  
    </form>     
 </div>
  </body>
</html>

Answer 1

看起来您的标记已经是全局的。这应该有效：

function addMarker(location){
  // check if the marker already exists and has a .setMap method
  if (marker && marker.setMap) {
    // remove existing marker from the map
    marker.setMap(null);
  }
  // create the marker
  marker = new google.maps.Marker({
    position: location,
    map: GlobalMap,
    draggable: true,
    animation: google.maps.Animation.DROP,
    clickable: true
 });
 // ... rest of your code

添加新标记时删除标记？

1 个答案: