在谷歌地图上刷新和删除标记

Question

我是新手谷歌地图功能，我想知道如何删除地图上的标记，将刷新地图删除标记或我需要添加一些东西去除标记？

我从数据库中使用Getjson循环添加标记。 。

这是我预先设置代码

var Rad = 0; 
var customerlocationID = 0; 

var geocoder, infoBubble, geocode; 
var map; 
var selectedMarker; 
var ID; 
//var mgr; 
$("#ddlRadius").live("change", function() { 
    var selectValue = ""; 
    selectValue = $("#ddlRadius option:selected").val(); 

    if (selectValue == "77") { 
     Rad = 5; 
     codeAddress(customerlocationID, Rad); 
    } else if (selectValue == "78") { 
     Rad = 10; 
     codeAddress(customerlocationID, Rad); 
    } else if (selectValue == "79") { 
     Rad = 25; 
     codeAddress(customerlocationID, Rad); 
    } else if (selectValue == "80") { 
     Rad = 50; 
     codeAddress(customerlocationID, Rad); 
    } else if (selectValue == "81") { 
     Rad = 100; 
     codeAddress(customerlocationID, Rad); 
    } 
}); 


function initialize() { 
    var minZoomLevel = 4; 
    var zooms = 7; 
    geocoder = new google.maps.Geocoder(); 
    geocode = new google.maps.Geocoder(); 

    // Used to Set the Center of the Maps on the Logged User 
    $.getJSON('/Dashboard/LoadAddress', function Geocoding(address) { 
     $.each(address, function() { 
      customerlocationID = this["ID"]; 
      var currValAddress = this["AddressLine1"]; 
      var Latitude = this["Latitude"]; 
      var Longitude = this["Longitude"]; 
      var LatLang = new google.maps.LatLng(Latitude, Longitude); 
      var addresse = { 
       zoom: 8, 
       center: LatLang, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById('map'), addresse); 


      // Bounds for North America 
      var strictBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(15.70, -160.50), 
      new google.maps.LatLng(68.85, -55.90)); 

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

      // Limit the zoom level 
      google.maps.event.addListener(map, 'zoom_changed', function() { 
       if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel); 
      }); 
     }); 
    }); 
    codeAddress(customerlocationID, Rad); 
} 

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 

function codeAddress(customerlocationID, Rad) { 
    infoBubble = new InfoBubble({ 
     map: map, 
     shadowStyle: 0, 
     padding: 10, 
     borderRadius: 10, 
     arrowSize: 15, 
     maxWidth: 300, 
     borderWidth: 1, 
     borderColor: '#ccc', 
     arrowPosition: 50, 
     arrowStyle: 0 
    }); 
    $.getJSON('/Dashboard/LoadWorkerList1' + '?customerLocationID=' + customerlocationID + '&radius=' + Rad, function Geocode(addresses) { 
     $.each(addresses, function() { 
      var currVal = this["AddressLine1"]; 
      var Name = this["Name"]; 
      var Gender = this["Gender"]; 
      var Bdate = this["Birthdate"]; 
      ID = this["Worker_ID"]; 
      var distance = this["Distance"]; 
      var workerDetailIDDD = this["Worker_ID"]; 
      var Latitude = this["Latitude"]; 
      var Longitude = this["Longitude"]; 
      var LatLang = new google.maps.LatLng(Latitude, Longitude); 

      var marker = new google.maps.Marker({ 
       map: map, 
       icon: '/Content/images/male.png', 
       position: LatLang, 
       title: currVal 
      }) 

      var link = $('<a href="#">' + currVal + '</a>').data('location', LatLang); 
      $('#places').append($('<li id=\'List\' class=\'List\'>').append(link)); 
      link.on('click', function (event) { 
       event.preventDefault(); 
       google.maps.event.trigger(addresses[0], "click"); 
       if (selectedMarker) { 
        selectedMarker.setIcon('/Content/images/male.png'); 
       } 
       marker.setIcon('/Content/images/maleclicked.png'); 
       selectedMarker = marker; 
       infoBubble.removeTab(0); 
       infoBubble.addTab(Name, "Name: " + Name + "<br> Address: " + currVal + "<br> Gender: " + Gender + "<br> Birthdate: " + Bdate + "<br> Distance: " + distance + "<br><br>" + '<center><a href="/Dashboard/WorkerMapDetail?workerId=' + workerDetailIDDD + '" onclick="window.open(this.href,height=850,width=1200);return false""><span style="font-size: 12px !important">View Profile</span></a></center>'); 
       infoBubble.open(map, marker); 
      }); 


      google.maps.event.addListener(map, 'idle', function() { 
       $('#places li').each(function() { 
        var inside = (map.getBounds().contains($(this).find('a').data('location'))) ? '' : 'none'; 
        $(this).css('display', inside); 
       }); 
      }); 

      // Listen for user click on map to close any open info bubbles 
      google.maps.event.addListener(map, "click", function() { 
       infoBubble.close(); 
       marker.setIcon('/Content/images/male.png'); 
      }); 

      google.maps.event.addListener(map, "dragstart", function() { 
       infoBubble.close(); 
       marker.setIcon('/Content/images/male.png'); 
      }); 
      google.maps.event.addListener(marker, 'click', (function (marker, i) { 
       return function() { 
        if (selectedMarker) { 
         selectedMarker.setIcon('/Content/images/male.png'); 
        } 
        marker.setIcon('/Content/images/maleclicked.png'); 
        selectedMarker = marker; 
        infoBubble.removeTab(0); 
        infoBubble.addTab(Name, "Name: " + Name + "<br> Address: " + currVal + "<br> Gender: " + Gender + "<br> Birthdate: " + Bdate + "<br> Distance: " + distance + "<br><br>" + '<center><a href="/Dashboard/WorkerMapDetail?workerId=' + workerDetailIDDD + '" onclick="window.open(this.href,height=850,width=1200);return false""><span style="font-size: 12px !important">View Profile</span></a></center>'); 
        infoBubble.open(map, marker); 
       } 
      })(marker, currVal)); 
     }) 
     google.maps.event.trigger(map, 'bounds_changed'); 
    }) 
} 
window.onload = function() { 
    initialize(); 
} 

致谢！

Answer 1

可以从地图通过传递null到标记的.setMap()功能，这样移除标记：

marker.setMap(null); 

如果你想从地图中删除所有的标记，你必须保持的数组标记和调用.setMap(null)上所有的人，像这样的：

$.each(markers, function() { 
    this.setMap(null); 
});