Я работаю над проектом Jquery, используя карту Leaflet. Мой проект получает данные json координаты для позиции полета. Мой код ниже работает нормально, но проблема в том, что у меня есть маркеры повторения на карте во время обновления данных. Я сделал несколько шагов, чтобы удалить предыдущую позицию маркеров, затем показывает новую позицию маркеров, но у меня есть ошибка 'types' can only be used in a .ts file.
маркеры, повторенные на карте во время обновления данных
Мой код
$(document).ready(function () {
var heading ;
coords: L.Marker[]
var type ;
// map initializing
var coords = [33,44]; // the geographic center of our map
var zoomLevel = 6 // the map scale.
var map = L.map('map').setView(coords, zoomLevel);
L.tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png', {
attribution: 'Map data ©',
maxZoom: 18
}).addTo(map);
// Aircraft data
setInterval(function(){
$.ajax('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', {
type: 'GET',
dataType: 'jsonp',
timeout: 5000
}).done(function (data, textStatus, jqXHR) {
// Error is here ------------ under marker //
coords ? coords.forEach((marker:marker) => {
marker.remove();
}) : '';
coords = [];
Object.keys(data)
.map(key => data[key])
.map((position) => ({
lat: position[1],
lng: position[2],
callSign: position[13],
heading: position[3],
AircraftType: position[8]
})).filter(position => position.lat && position.lng && position.callSign
&& position.heading
&& position.AircraftType).forEach(i => {
console.log(i.lat, i.lng, i.heading)
coords.push( new L.Marker([i.lat, i.lng], {
icon: new L.DivIcon({
html: ` <div style="width:120px;";>
<div class="temp-${i.heading} ${type}"></div>
<span style="color:white;background-color: midnightblue;margin: 4px;padding: 4px;border-radius: 3px;">
${i.callSign}
</span
></div>`
})
}).addTo(marker))
})
},5000)
});