Как очистить маркеры Google maps

Question

Мне нужна помощь в размещении маркеров и их ликвидации, поскольку они попросили меня применить аналогичное приложение к Uber, проблема в том, что пока я перемещаю автомобиль, он остается видимым в предыдущей позиции, и я не делаю знать, как удалить его и положить новый бренд, чтобы дать эффект движения.

Моя ссылка:

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

Мой код:

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

Во-первых, добавить свои маркеры на массив, в то время как вы добавляете их на карту (в setMarkers). Затем используйте это:

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

setMapOnAll(null); 

Назовите его каждый раз перед установкойMarkers внутри интервала.

Впоследствии вы можете пойти дальше и удалить только те, которые действительно переехали. (Через анализ маркеров в массиве и новых маркерах)

Answer 2

Если вам нужен только один маркер, и вы хотите обновить его позицию, создайте его один раз, а затем переместите его.

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

фрагмент кода:

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>