刪除Google標記

-2

以下代碼會加載谷歌地圖並每隔大約刷新一次標記的位置。問題是代碼一直在反覆寫入標記的位置。在寫一個新標記之前，有沒有辦法去除之前的標記？刪除Google標記

問題是，當它清除標記clearOverlays（）;它不更新新的。

任何幫助或建議將不勝感激。

這個問題不同於以前的問題，因爲問題是調用clearOverlays（）;從函數refreshDiv（）它不會更新。

<!DOCTYPE html> 
<html> 
    <head> 


    <style> 

     #map { 
     height: 100%; 
     } 

     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 



    </head> 
    <body onload='refreshDiv()'> 
    <div id='map'></div>"); 




    <script> 


    function refreshDiv() 
    { 
    clearOverlays(); 
    var refresher = setTimeout('refreshDiv()', 1000); 
    updateMarker(map); 
    } 


    function initMap() 
    { 
      window.map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 10, 
      center: {lat: ".$latitude.", lng: ".$longitude."} 
     }); 
    } 


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


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




     function updateMarker(map) 
     { 

     var beaches = [['"Jim"', 55.0102686,-1.5847956999999724],]; 


     var image = { 
      url: '1.png', 
      // This marker is 20 pixels wide by 32 pixels high. 
      size: new google.maps.Size(20, 32), 
      // The origin for this image is (0, 0). 
      origin: new google.maps.Point(0, 0), 
      // The anchor for this image is the base of the flagpole at (0, 32). 
      anchor: new google.maps.Point(0, 32) 
     }; 



     var shape = { 
      coords: [1, 1, 1, 20, 18, 20, 18, 1], 
      type: 'poly' 
     }; 

     for (var i = 0; i < beaches.length; i++) { 
      window.beach = beaches[i]; 
      window.marker = new google.maps.Marker({ 
      position: {lat: beach[1], lng: beach[2]}, 
      map: map, 
      icon: image, 
      shape: shape, 
      title: beach[0], 
      zIndex: beach[3] 
      }); 
     } 
     } 


    </script>  



    <script async defer 
    src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBVQaENEYHY2g-mRhD6_tj1cSK8DhQoqHI&callback=initMap'> 
    </script> 

    </body> 
</html>

來源

2017-04-16 user7763438

希望這個例子有幫助！

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Remove Markers</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; 
     } 
     #floating-panel { 
     position: absolute; 
     top: 10px; 
     left: 25%; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     text-align: center; 
     font-family: 'Roboto','sans-serif'; 
     line-height: 30px; 
     padding-left: 10px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="floating-panel"> 
     <input onclick="clearMarkers();" type=button value="Hide Markers"> 
     <input onclick="showMarkers();" type=button value="Show All Markers"> 
     <input onclick="deleteMarkers();" type=button value="Delete Markers"> 
    </div> 
    <div id="map"></div> 
    <p>Click on the map to add markers.</p> 
    <script> 

     // In the following example, markers appear when the user clicks on the map. 
     // The markers are stored in an array. 
     // The user can then click an option to hide, show or delete the markers. 
     var map; 
     var markers = []; 

     function initMap() { 
     var haightAshbury = {lat: 37.769, lng: -122.446}; 

     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
      center: haightAshbury, 
      mapTypeId: 'terrain' 
     }); 

     // This event listener will call addMarker() when the map is clicked. 
     map.addListener('click', function(event) { 
      addMarker(event.latLng); 
     }); 

     // Adds a marker at the center of the map. 
     addMarker(haightAshbury); 
     } 

     // Adds a marker to the map and push to the array. 
     function addMarker(location) { 
     var marker = new google.maps.Marker({ 
      position: location, 
      map: map 
     }); 
     markers.push(marker); 
     } 

     // Sets the map on all markers in the array. 
     function setMapOnAll(map) { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(map); 
     } 
     } 

     // Removes the markers from the map, but keeps them in the array. 
     function clearMarkers() { 
     setMapOnAll(null); 
     } 

     // Shows any markers currently in the array. 
     function showMarkers() { 
     setMapOnAll(map); 
     } 

     // Deletes all markers in the array by removing references to them. 
     function deleteMarkers() { 
     clearMarkers(); 
     markers = []; 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
    </script> 
    </body> 
</html>

來源

2017-04-16 08:27:27

謝謝。看到谷歌，但問題是代碼清除標記，但不會再更新它們。我已添加clearOverlays（）;但這似乎不允許之後的更新。有什麼想法嗎？ – user7763438

有一個類似的問題，你可以嘗試該解決方案。我認爲它應該工作。 http://stackoverflow.com/questions/8229827/update-markercluster-after-removing-markers-from-array –

我在谷歌地圖api上工作了很久。我會試着在我的舊代碼文件中找出我是如何做到的。 –

根據我的假設，您需要更新標記。如果我是正確的，請檢查下面的答案。正如我定義他們的標記動態更新他們的。

https://stackoverflow.com/a/43435488/7668554

來源

2017-04-16 09:02:19 Aadeelyoo

謝謝你們的幫助。但不能真正使用任何這些答案。原諒我的無知 – user7763438

刪除Google標記

回答

相關問題