Блог

У меня есть карта-листовка, которая содержит маркеры для 10 самых густонаселенных городов в стране. Когда пользователь нажимает на маркер города, выполняется вызов AJAX. Я передаю код города lat, lng и страны в API, который возвращает 5 близлежащих аэропортов (название, lat, lng). Затем я просматриваю полученные данные JSON, чтобы разместить маркеры для каждого аэропорта на карте.

Моя проблема в том, что некоторые города находятся рядом друг с другом, и поэтому на карте иногда размещается дубликат маркера аэропорта.

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

Мне также интересно, есть ли более простое решение этой проблемы. Любая помощь была бы очень признательна. Соответствующий код ниже:

 if (map.hasLayer(capCityCluster)) {
  map.removeLayer(capCityCluster);
}
capCityCluster = new L.markerClusterGroup();
map.addLayer(capCityCluster);

var largeCityMarker = L.marker(new L.LatLng(cityLat, cityLng), ({
  icon: cityIcon
})).bindPopup(`<div class="markerContainer"><h3>${cityName}</h3><img class="markerThumbnail" src='${cityThumbnailImg}' onerror="this.style.display='none'"><p class="markerTxtDescription">${cityInfo}</p><div id="city-link"><a href="//${cityUrl}" target="_blank">${cityText}</a></div></div>`, cityOptions).once('click', function(e) {
  map.flyTo(e.latlng, 10);
  $.ajax({
    url: "assets/php/airports.php",
    type: 'GET',
    dataType: 'json',
    data: {
      lat: this.getLatLng().lat,
      lng: this.getLatLng().lng,
      countryCodeA2: borderCountryCode,
    },
    success: function(result) {
      //airport markers
      result.data.capCityAirports.items.forEach(airport => {
        var airportIcon = L.icon({
          iconUrl: 'assets/img/icons/airport.png',
          iconSize: [50, 50],
          popupAnchor: [0, -15]
        });
        airportName = airport.title;
        airportLat = airport.position.lat;
        airportLng = airport.position.lng;
        var airportMarker = L.marker(new L.LatLng(airportLat, airportLng), ({
          icon: airportIcon
        })).bindPopup(airportName);
        capCityCluster.addLayer(airportMarker);
      });
 

Вы можете просмотреть все слои в группе и проверить, существует ли маркер с одинаковыми значениями:

 var alreadyExists = false;

var latlng = new L.LatLng(airportLat, airportLng);
capCityCluster.getLayers().forEach((layer)=>{
    if(!alreadyExists amp;amp; layer instanceof L.Marker amp;amp; layer.getLatLng().equals(latlng)){
       alreadyExists = true;
    }
});

// if alreadyExists is true, it is a duplicate
if(!alreadyExists){
    var airportMarker = L.marker(latlng, {
      icon: airportIcon
    }).bindPopup(airportName);

    capCityCluster.addLayer(airportMarker);
}
 

Также у вас есть ошибка в создании маркера. удалите параметры () вокруг:

 var airportMarker = L.marker(new L.LatLng(airportLat, airportLng), >>>(<<<{
          icon: airportIcon
        }>>>)<<<).bindPopup(airportName);