Я создаю приложение, которое получает местоположение в реальном времени и отображает его на карте Google. Через определенный промежуток времени мне нужно удалить старые маркеры и отобразить обновленные маркеры.
Ниже мой код
function initMap(rtl_data) {
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(24.238162, 45.156379);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var marker = []
var map = new google.maps.Map(document.getElementById("map"),myOptions);
directionsDisplay.setMap(map);
makeMarkers(rtl_data)
function makeMarkers(rtl_data){
// Drivers Location Markers
deleteMarkers()
features = []
marker = []
drivers_latlng = rtl_data.drivers_latest_location
drivers_latlng.forEach(function(e){
features.push({
position: new google.maps.LatLng(e.lat, e.lng),
type: e.order_id,
title: e.driver_id,
description: e.order_id ? "Ongoing order: "+e.order_id : "No order assigned."
})
})
image = "/files/truck.png"
infoWindow = new google.maps.InfoWindow();
for (i = 0; i < features.length; i++) {
marker = new google.maps.Marker({
position: features[i].position,
map: map,
title: features[i].title,
type: features[i].type,
icon: image,
description: features[i].description
});
//Attach click event to the marker.
(function (marker) {
google.maps.event.addListener(marker, "click", function (e) {
//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + marker.description + "</div>");
infoWindow.open(map, marker);
});
})(marker);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < marker.length; i++) {
marker[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
console.info('clearMarkers')
}
// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
console.info('deleteMarkers')
clearMarkers();
marker = [];
}
}
// Fetch Realtime using time interval
setInterval(function() {
frappe.call({ // Simple AJAX Call which returns locations and location realated data.
method: "get_drivers_locations",
async: false,
callback: function(r){
rtl_data = r.message
}
})
makeMarkers(rtl_data)
}, 5000);
Я уже использовал метод, который используется в документации Google Map. Используя ClearMarkers, старые маркеры очищаются. Но в моем случае это не работает. Когда я запускаю код выше, он отображает как старые, так и обновленные маркеры.
См. скриншот ниже, на котором повторяются маркеры с обновленными местоположениями.




![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы инициализируете маркер как массив:
var marker = []
Но позже назначьте экземпляр Marker:
marker = new google.maps.Marker({...})
Я не запускал ваш пример, но ожидаю, что переменная marker будет содержать не массив маркеров, а последний созданный маркер.
Попробуйте сделать следующее:
В примере создается новый экземпляр маркера, который затем помещается в массив маркеров: markers.push(marker); Пожалуйста, обратите внимание на функцию addMarker.
Это не дает ответа, поэтому, вероятно, это должен быть комментарий.
После прочтения темы ниже: Google Map API — удаление маркеров Я нашел решение. Я создал один массив.
gmarkers = []
и вставил в него все свои новые маркеры.
gmarkers.push(marker)
Чтобы удалить маркеры, я использовал следующую функцию.
function setMapOnAll(map) {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(map);
}
}
Да, кажется, ответ ниже был правильным.
Ваша закрывающая скобка для функции инициализации неверна. Если вы посмотрите на исходную документацию, функция инициализации закрывается перед функцией addmarker. В вашем примере он закрывается непосредственно перед setInterval. Таким образом, ваш setInterval, вероятно, не может даже получить доступ к функции makeMarker, потому что она находится внутри другой функции.
Нет, вы можете обратиться к официальной документации: (из Google) Developers.google.com/maps/documentation/javascript/examples/…