Удаление маркера карт Google, хранящегося в массиве

Question

У меня есть карта, которая добавляет маркеры в массив (markerStore) из запроса, который выполняется каждые 2 секунды. Все работает нормально, за исключением того, что я не могу понять, как УДАЛИТЬ маркеры из массива, когда они больше не находятся в запросе:

$(document).ready(function() {

    //Time between marker refreshes
    var INTERVAL = 2000;

    SlidingMarker.initializeGlobally();

    //Used to remember markers
    var markerStore = {};

    var infowindow = new google.maps.InfoWindow();

    var myLatlng = new google.maps.LatLng(LAT,LNG);
    var myOptions = {
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    getMarkers();   

    function getMarkers() {
        $.get('/data.php', {}, function(res,resp) {
            console.dir(res);
            for(var i=0, len=res.length; i<len; i++) {

                //Do we have this marker already?
                if(markerStore.hasOwnProperty(res[i].id)) {

                    markerStore[res[i].id].setPosition(new google.maps.LatLng(res[i].position.lat,res[i].position.long));

                } else {

                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(res[i].position.lat,res[i].position.long),
                        title:res[i].name,
                        map:map,
                    }); 
                    markerStore[res[i].id] = marker;

                }


            }
            window.setTimeout(getMarkers,INTERVAL);
        }, "json");
    }

})

Любые идеи, как я могу удалить те, которые находятся в markerStore, но больше не в запросе data.php? Мой массив такой:

[
 {"id":1,"name":"Peter","position":{"lat":10.0000,"long":15.0000}},
 {"id":2,"name":"Paul","position":{"lat":20.0000,"long":25.00000}}
]

Answer 1

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

var timeStamp = Date.now();
console.dir(res);
for (var i = 0, len = res.length; i < len; i++) {
  //Do we have this marker already?
  if (markerStore.hasOwnProperty(res[i].id)) {
    markerStore[res[i].id].setPosition(new google.maps.LatLng(res[i].position.lat, res[i].position.long));
    markerStore[res[i].id].timeStamp = timeStamp;
  } else {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(res[i].position.lat, res[i].position.long),
      title: res[i].name,
      map: map,
    });
    markerStore[res[i].id] = marker;
    markerStore[res[i].id].timeStamp = timeStamp;
  }
}
for (var markerId in markerStore) {
  if (markerStore.hasOwnProperty(markerId)) {
    console.log("timeStamp=" + timeStamp + " i=" + i + " id=" + markerId + " timestamp=" + markerStore[markerId].timeStamp);
    if (markerStore[markerId].timeStamp < timeStamp) {
      markerStore[markerId].setMap(null);
      delete markerStore[markerId]
    }
  }
}

подтверждение концепции скрипки

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

var cnt = 0;  // simulate different responses
$(document).ready(function() {
  //Time between marker refreshes
  var INTERVAL = 2000;
  //Used to remember markers
  var markerStore = {};
  var infowindow = new google.maps.InfoWindow();
  var myLatlng = new google.maps.LatLng(20, 20);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  getMarkers();

  function getMarkers() {
    var res = inputData[cnt++ % inputData.length];
    var timeStamp = Date.now();
    for (var i = 0, len = res.length; i < len; i++) {
      //Do we have this marker already?
      if (markerStore.hasOwnProperty(res[i].id)) {
        markerStore[res[i].id].setPosition(new google.maps.LatLng(res[i].position.lat, res[i].position.long));
        markerStore[res[i].id].timeStamp = timeStamp;
      } else {
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(res[i].position.lat, res[i].position.long),
          title: res[i].name,
          map: map,
        });
        markerStore[res[i].id] = marker;
        markerStore[res[i].id].timeStamp = timeStamp;
      }
    }
    for (var markerId in markerStore) {
      if (markerStore.hasOwnProperty(markerId)) {
        if (markerStore[markerId].timeStamp < timeStamp) {
          markerStore[markerId].setMap(null);
          delete markerStore[markerId]
        }
      }
    }
    window.setTimeout(getMarkers, INTERVAL);
  }
})

var inputData = [
  [{
      "id": 1,
      "name": "Peter",
      "position": {
        "lat": 10.0000,
        "long": 15.0000
      }
    },
    {
      "id": 2,
      "name": "Paul",
      "position": {
        "lat": 20.0000,
        "long": 25.00000
      }
    }
  ],
  [{
      "id": 1,
      "name": "Peter",
      "position": {
        "lat": 11.0000,
        "long": 15.0000
      }
    },
    {
      "id": 2,
      "name": "Paul",
      "position": {
        "lat": 21.0000,
        "long": 25.00000
      }
    }
  ],
  [{
    "id": 2,
    "name": "Paul",
    "position": {
      "lat": 22.0000,
      "long": 25.00000
    }
  }],
  [{
      "id": 2,
      "name": "Paul",
      "position": {
        "lat": 23.0000,
        "long": 25.00000
      }
    },
    {
      "id": 3,
      "name": "George",
      "position": {
        "lat": 5.0000,
        "long": 15.0000
      }
    }
  ],
  [{
      "id": 2,
      "name": "Paul",
      "position": {
        "lat": 24.0000,
        "long": 25.00000
      }
    },
    {
      "id": 3,
      "name": "George",
      "position": {
        "lat": 6.0000,
        "long": 15.0000
      }
    }
  ]

];

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map_canvas"></div>

Answer 2

Попробуй это. Вы можете получить представление о том, как удалить отсюда.

indexes содержит все элементы, которые вы хотите удалить из массива маркеров.

let markers = [
 {"id":1,"name":"Peter","position":{"lat":10.0000,"long":15.0000}},
 {"id":2,"name":"Paul","position":{"lat":20.0000,"long":25.00000}},
{"id":5,"name":"Paul","position":{"lat":20.0000,"long":25.00000}}
];

const indexes = [{id:1}, {id:3},{id:5}];
indexes.forEach(i => {
  const foundAt =  markers.findIndex(m => i.id === m.id);
  if(foundAt > -1) markers.splice(foundAt,1);
});

console.log(markers);

Итерация по массиву индексов и для каждого элемента в нем, проверьте, присутствует ли он в массиве маркеров, используя findIndex() и удаление этого конкретного элемента из маркеров, используя splice().