添加新标记时删除标记？

-1

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

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>

来源

2015-08-21 Jacob Guthrie

将一个console.log（$（this））添加到右键单击函数并与console.log（marker）进行比较。我想知道setMap应该在“this”而不是标记上完成吗？ –

我不确定你的意思。我对编码世界相当陌生。 –

看起来你的标记已经是全球性的。这应该工作：

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

来源

2015-08-21 19:20:36 geocodezip

谢谢，这正是我想要的。 –

添加新标记时删除标记？

回答

相关问题