2017-04-16 2 views
-2

Der folgende Code lädt eine Google-Karte und aktualisiert die Positionen der Markierungen jede Sekunde. Das Problem ist, dass der Code den Standort der Marker immer wieder neu schreibt. Gibt es eine Möglichkeit, den vorherigen Marker vor dem Schreiben eines neuen zu entfernen?Entfernen von Google-Markierungen

Das Problem ist, dass, wenn es die Markierungen löscht clearOverlays(); es aktualisiert keine neuen.

Jede Hilfe oder Beratung wäre sehr willkommen.

Diese Frage unterscheidet sich von vorherigen Fragen, da das Problem beim Aufruf von clearOverlays() auftritt; von der Funktion refreshDiv() wird es nicht aktualisiert.

<!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> 

Antwort

0

Hoffe, dieses Beispiel hilft!

<!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> 
+0

Danke. Gesehen, dass auf Google, aber das Problem ist, dass der Code die Markierungen löscht, aber sie nicht wieder aktualisiert. Ich habe clearOverlays() hinzugefügt; aber das scheint danach kein update zu erlauben. Irgendwelche Gedanken? – user7763438

+0

Es gibt eine ähnliche Frage, die Sie diese Lösung versuchen können. Ich denke, es sollte funktionieren. http://stackoverflow.com/questions/8229827/update-markercluster-after-removing-markers-from-array –

+0

Ich arbeitete auf Google Maps API lange zurück. Ich werde versuchen, in meinen alten Code-Dateien herauszufinden, wie ich das gemacht habe. –

0

Wie pro meine Annahme müssen Sie Marker aktualisieren. Wenn ich richtig liege, überprüfen Sie bitte die folgende Antwort. Wie ich ihre Marker dynamisch definiert habe, aktualisiere sie.

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

+0

Danke Jungs für die Hilfe. Aber kann wirklich keine dieser Antworten verwenden. Vergib meine Unwissenheit .. – user7763438