如何通過JavaScript刪除或清除Google地圖標記？

我正在關注this tutorial。本教程對我來說非常完美。但是我無法刪除或清除現有標記。如何通過JavaScript刪除或清除Google地圖標記？

我已經試過

map.clear();

和

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

但沒有任何工程。我已經提供了下面的整個代碼。我不是一個好的網絡程序員，所以最好編輯這段代碼。

<!DOCTYPE html > 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Using MySQL and PHP with Google Maps</title> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 

    <body> 
    <div id="map"></div> 

    <script> 
     var customLabel = { 
     restaurant: { 
      label: 'R' 
     }, 
     bar: { 
      label: 'B' 
     } 
     }; 

     function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: new google.maps.LatLng(-33.863276, 151.207977), 
      zoom: 12 
     }); 
     var infoWindow = new google.maps.InfoWindow; 

      // Change this depending on the name of your PHP or XML file 
      downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName('marker'); 
      Array.prototype.forEach.call(markers, function(markerElem) { 
       var id = markerElem.getAttribute('id'); 
       var name = markerElem.getAttribute('name'); 
       var address = markerElem.getAttribute('address'); 
       var type = markerElem.getAttribute('type'); 
       var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')), 
        parseFloat(markerElem.getAttribute('lng'))); 

       var infowincontent = document.createElement('div'); 
       var strong = document.createElement('strong'); 
       strong.textContent = name 
       infowincontent.appendChild(strong); 
       infowincontent.appendChild(document.createElement('br')); 

       var text = document.createElement('text'); 
       text.textContent = address 
       infowincontent.appendChild(text); 
       var icon = customLabel[type] || {}; 
       var marker = new google.maps.Marker({ 
       map: map, 
       position: point, 
       label: icon.label 
       }); 
       marker.addListener('click', function() { 
       infoWindow.setContent(infowincontent); 
       infoWindow.open(map, marker); 
       }); 
      }); 
      }); 
     } 



     function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
      } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
     } 

     function doNothing() {} 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
    </script> 
    </body> 
</html>

來源

2017-07-15 XpressGeek

您的標記數組不是數組google.maps.Marker。你的數組包含xmlnodes。您必須將正在創建的標記存儲在適當變量的xmlnodes數組的foreach方法中。例如：

var mapMarkers = []; 

function initMap() { 
    mapMarkers = []; 
    var map ... 

    downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function (data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName('marker'); 
     Array.prototype.forEach.call(markers, function (markerElem) { 
      var id = markerElem.getAttribute('id'); 

      ... 

      var marker = new google.maps.Marker({ 
       map: map, 
       position: point, 
       label: icon.label 
      }); 
      marker.addListener('click', function() { 
       infoWindow.setContent(infowincontent); 
       infoWindow.open(map, marker); 
      }); 
      mapMarkers.push(marker) 
     }); 
    }); 
} 

function downloadUrl(url, callback) { 
    ... 
}

現在你可以遍歷mapMarkers刪除從地圖標記。

來源

2017-07-15 15:40:59

真是一種解脫！真棒解決方案@Shane – XpressGeek

如何通過JavaScript刪除或清除Google地圖標記？

回答

相關問題