Wie Markern zu reinigen Google Maps

Question

Ich brauche Hilfe, Marker zu setzen und sie ausscheiden beseitigt, da sie mich eine ähnliche Anwendung zu Uber gefragt haben, das Problem ist, dass während ich das Auto in der vorherigen Position sichtbar bleibt und ich nicht wissen, wie man es entfernt und die neue Marke einsetzt, um den Effekt der Bewegung zu erzielen.

Mein Hinweis:

https://developers.google.com/maps/documentation/javascript/examples/icon-complex?hl=es-419

Mein Code:

function initMap() { 
    var styledMap = new google.maps.StyledMapType(styles, { name: "Styled Map" }); 

    var mapOptions = { 
     zoom: 18, 
     center: new google.maps.LatLng(19.302286, -99.192976), 
     mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
     } 
    }; 
    var map = new google.maps.Map(document.getElementById('map'), 
     mapOptions); 
    map.mapTypes.set('map_style', styledMap); 
    map.setMapTypeId('map_style'); 
    setInterval(function() { setMarkers(map); }, 5000); 
} 

var LAC1 = [ 
    19.3027874, 19.302775, 19.302708, 19.302647, 19.302601, 19.302537, 
    19.302513, 19.302472, 19.302444, 19.302397, 19.302353, 19.302332, 
    19.302298, 19.302283, 19.302265, 19.302270, 19.302190, 19.302186, 
    19.302198, 19.302268, 19.302334, 19.302449, 19.302506, 19.302659, 
    19.302870, 19.303052, 19.303217 
]; 
var LC1 = [ 
    -99.1872615, -99.187810, -99.188320, -99.188846, -99.189252, -99.189853, 
    -99.190115, -99.190555, -99.190870, -99.191272, -99.191633, -99.191913, 
    -99.192264, -99.192547, -99.192755, -99.192918, -99.193718, -99.194205, 
    -99.194586, -99.195342, -99.195847, -99.196445, -99.196624, -99.197140, 
    -99.197661, -99.198034, -99.198320 
]; 
var conT = 0; 

function setMarkers(map) { 
    if (conT < 27) { 
     var camiones = [ 
      ['Camion 1', LAC1[conT], LC1[conT], 1] 
     ]; 
     conT = conT + 1; 
    } else { 
     conT = null; 
     conT = 0; 
    } 
    var image = { 
     url: 'camion.png', 
     scaledSize: new google.maps.Size(70, 30) // scaled size 
    }; 
    var shape = { 
     coords: [1, 1, 1, 20, 18, 20, 18, 1] 
    }; 
    for (var i = 0; i < camiones.length; i++) { 

     var camionT = camiones[i]; 
     var marker = new google.maps.Marker({ 
      position: { lat: camionT[1], lng: camionT[2] }, 
      map: map, 
      icon: image, 
      shape: shape, 
      title: camionT[0], 
      zIndex: camionT[3] 
     }); 
    } 
} 

Answer 1

Zuerst Ihre Markierungen zu einem Array hinzufügen, während Sie sie auf der Karte hinzufügen (innen setMarkers). Dann verwenden Sie diese:

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

setMapOnAll(null); 

Rufen Sie es jedes Mal vor setMarkers innerhalb des Intervalls.

Danach könnten Sie weiter gehen und nur diejenigen entfernen, die sich wirklich bewegt haben. (Durch Analyse der Marker im Array und der neuen Marker)

Answer 2

Wenn Sie nur einen Marker möchten und seine Position aktualisieren möchten, erstellen Sie ihn nur einmal und verschieben Sie ihn dann.

// if marker doesn't exist, create it 
if (!marker || !marker.setPosition) { 
    marker = new google.maps.Marker({ 
    position: { 
     lat: camionT[1], 
     lng: camionT[2] 
    }, 
    map: map, 
    title: camionT[0], 
    zIndex: camionT[3] 
    }); 
} else { 
// if marker already exists, move it 
    marker.setPosition({ 
    lat: camionT[1], 
    lng: camionT[2] 
    }); 
} 

proof of concept fiddle

Code-Schnipsel:

function initMap() { 
 
    var mapOptions = { 
 
    zoom: 16, 
 
    center: new google.maps.LatLng(19.302286, -99.192976), 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), 
 
    mapOptions); 
 
    setInterval(function() { 
 
    setMarkers(map); 
 
    }, 5000); 
 
} 
 

 
var LAC1 = [ 
 
    19.3027874, 19.302775, 19.302708, 19.302647, 19.302601, 19.302537, 
 
    19.302513, 19.302472, 19.302444, 19.302397, 19.302353, 19.302332, 
 
    19.302298, 19.302283, 19.302265, 19.302270, 19.302190, 19.302186, 
 
    19.302198, 19.302268, 19.302334, 19.302449, 19.302506, 19.302659, 
 
    19.302870, 19.303052, 19.303217 
 
]; 
 
var LC1 = [-99.1872615, -99.187810, -99.188320, -99.188846, -99.189252, -99.189853, -99.190115, -99.190555, -99.190870, -99.191272, -99.191633, -99.191913, -99.192264, -99.192547, -99.192755, -99.192918, -99.193718, -99.194205, -99.194586, -99.195342, -99.195847, -99.196445, -99.196624, -99.197140, -99.197661, -99.198034, -99.198320]; 
 
var conT = 0; 
 
var marker; 
 

 
function setMarkers(map) { 
 
    if (conT < 27) { 
 
    var camiones = [ 
 
     ['Camion 1', LAC1[conT], LC1[conT], 1] 
 
    ]; 
 
    conT = conT + 1; 
 
    } else { 
 
    conT = null; 
 
    conT = 0; 
 
    } 
 
    for (var i = 0; i < camiones.length; i++) { 
 

 
    var camionT = camiones[i]; 
 
    if (!marker || !marker.setPosition) { 
 
     marker = new google.maps.Marker({ 
 
     position: { 
 
      lat: camionT[1], 
 
      lng: camionT[2] 
 
     }, 
 
     map: map, 
 
     title: camionT[0], 
 
     zIndex: camionT[3] 
 
     }); 
 
    } else { 
 
     marker.setPosition({ 
 
     lat: camionT[1], 
 
     lng: camionT[2] 
 
     }); 
 
    } 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>