Question

我有一个地图，它会根据每2秒运行一次的请求向数组（markerStore）添加标记。一切都运行正常，除非我不知道如何从数组中删除它们不再在请求中的标记：

$(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

试试这个。您可以从这里了解如何删除。

索引包含要从markers数组中删除的所有元素。

＆＃13;

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);

＆＃13;

遍历索引数组并对其中的每个元素进行迭代，使用findIndex()检查它是否存在于markers数组中，并使用splice()从标记中删除该特定元素。

Answer 2

您可以为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]
    }
  }
}

proof of concept fiddle

代码段

＆＃13;

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
      }
    }
  ]

];

＆＃13;

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

＆＃13;

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

＆＃13;

删除存储在数组中的Google地图标记

2 个答案: