无法将点击事件上的传单标记限制为仅关闭一次

Question

所以我有一个国家的 10 个城市的传单标记，这些城市是通过 api ajax 调用创建的。当用户单击其中一个城市标记时，将进行不同的 ajax 调用，获取 20 个附近地点的维基百科文章，并为地图上的每个地点添加一个标记。一切正常，但是如果再次单击城市标记，则会再次调用 ajax 并且每次单击城市标记时都会添加重复的 20 个标记。我想防止多个 ajax calls/duplicate 标记。

我试过了

.one( "click", function() {//my code});

然而结果是下面的错误

L.marker(...).bindPopup(...).one is not a function

我也试过了

$(this).off(event);

如有任何帮助，我们将不胜感激。

我的js代码：

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)
.on('click', function() {
                        $.ajax({
                            url: "assets/php/wikiLoops.php",
                            type: 'GET',
                            dataType: 'json',
                            data: {
                                lat: this.getLatLng().lat,
                                lng: this.getLatLng().lng,
                                countryCodeA2: borderCountryCode
                            },
                        
                            success: function(result) {
      //wiki Find Nearby Places for cities
                                wikiCluster = new L.markerClusterGroup();
                                console.log(result);
                                result.data.wikiCitiesData.geonames.forEach(place => {
                                    
                                    var wikiPlaceIcon = L.icon({
                                        iconUrl: 'assets/img/icons/wikipedia.png',
                                        iconSize: [50, 50], // size of the icon
                                        popupAnchor: [0,-15]
                                        });
                                    var customOptions =
                                        {
                                        'maxWidth': '300',
                                        'className' : 'custom'
                                        };
                                        
                                    wikiPlaceName = place.title;
                                    wikiPlaceLat = place.lat;
                                    wikiPlaceLng = place.lng;
                                    wikiSummary = place.summary;
                                    wikiUrl = place.wikipediaUrl;
                                    wikiThumbnail = place.thumbnailImg;
                                    
                                    var customPopup = `<div class="card" style="width: 18rem;">
<div class="card-body"><h5 class="card-title">${wikiPlaceName}</h5><img class="img-thumbnail float-right" style="max-width: 100px" src="${wikiThumbnail}" onerror="this.style.display='none'"><p class="card-text" id="wiki-sum">${wikiSummary}</p><a href="//${wikiUrl}" target="_blank"class="card-link">Read more</a><a href="#" class="card-link"></a></div></div>`;
                                    
                                    wikiPlaceMarker = L.marker(new L.LatLng(wikiPlaceLat, wikiPlaceLng), ({icon: wikiPlaceIcon})).bindPopup(customPopup,customOptions);
                                    console.log(wikiPlaceMarker);

                                    capCityCluster.addLayer(wikiPlaceMarker);  
                                    
                                });
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                console.log("wikiLoopPHP",textStatus, errorThrown);
                            }
                        });
                     });
    
                    largeCityCluster.addLayer(largeCityMarker);
                    
                    });

                });
                
            }
        
        },

Answer 1

您似乎混淆了 jQuery 语法和 Leaflet 语法。

在 Leaflet 中，使用 once method:

附加一个应该只触发一次然后自动删除的事件监听器

Behaves as on(…), except the listener will only get fired once and then removed.

L.marker(latLng)
  .bindPopup(popupContent)
  .once('click', function() {});

无法将点击事件上的传单标记限制为仅关闭一次

unable to limit leaflet marker on click event to only go off once

javascript

jquery

onclick

leaflet

leaflet.markercluster