在单独的 AJAX 函数/API 调用中使用现有的 lat/lng 传单标记

Question

我有一张带有标记的传单地图，显示了所选国家/地区的热门城市。单击标记时，将在 AJAX 调用中使用该城市的 lat/lng，并通过对天气使用 PHP cURL 例程弹出显示城市天气信息的模态API。触发此点击事件后会出现几个 easyButton。

我现在想添加另一个模式，其中包含同一城市的不同信息，当用户单击其中一个 easyButtons 时会弹出，方法是使用另一个 API 使用相同的 lat/lng天气呼叫中使用的值。

我很谨慎，我的主要功能现在变得很长很复杂。此外，我知道 $cityMarker 点击功能不适用于这个新的 modal/easy 按钮，因为它需要新的点击。因此我认为最好创建一个单独的函数。

是否有一种简单的方法能够访问 AJAX 调用中的 lat/lng 值以在函数范围之外使用 - 即当用户单击新的 easyButton 时 lat/lng 可以使用当前标记的数据？或者关于如何实现此功能的任何其他建议？

非常感谢任何帮助 - 谢谢！

JS:

var locationList = [];
                    citiesArray.forEach(city => {
                        locationList.push({
                            lat: city.lat,
                            lng: city.lng,
                            cityName: city.toponymName
                        });
                    });
                    
                    console.log(locationList)
                    for (var i=0; i < locationList.length; i++) {
                        $cityMarker = L.marker(new L.latLng([locationList[i]['lat'], locationList[i]['lng']]))
                        .addTo($layers)
                        .bindPopup(locationList[i]['cityName'])
                    
                
                        $($cityMarker).on('click', (event) => {
                            var marker = event.target;
                            $.ajax({
                                url: "getLatLngInfo.php",
                                type: 'POST',
                                data: {
                                    lat: marker.getLatLng().lat,
                                    lng: marker.getLatLng().lng
                                },
                                success: function(result) {
                    
                                    console.log(result);
                                    $weatherButton.enable();
                                    $wikiButton.enable();
                                        $('#weather').modal('show');

                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    console.log(errorThrown);
                                    console.log(textStatus);
                                    console.log(jqXHR);
                                
                                }
                            });
                        });
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
                console.log(textStatus);
                console.log(jqXHR);
        }
    });
});

$($wikiButton).on('click'.............

Answer 1

您可以将点击的标记存储在变量中clickedMarker:

var locationList = [];
var clickedMarker;
                    citiesArray.forEach(city => {
                        locationList.push({
                            lat: city.lat,
                            lng: city.lng,
                            cityName: city.toponymName
                        });
                    });
                    
                    console.log(locationList)
                    for (var i=0; i < locationList.length; i++) {
                        $cityMarker = L.marker(new L.latLng([locationList[i]['lat'], locationList[i]['lng']]))
                        .addTo($layers)
                        .bindPopup(locationList[i]['cityName'])
                    
                
                        $($cityMarker).on('click', (event) => {
                            var marker = event.target;
                            clickedMarker = marker;
                            $.ajax({
                                url: "getLatLngInfo.php",
                                type: 'POST',
                                data: {
                                    lat: marker.getLatLng().lat,
                                    lng: marker.getLatLng().lng
                                },
                                success: function(result) {
                    
                                    console.log(result);
                                    $weatherButton.enable();
                                    $wikiButton.enable();
                                    $('#weather').modal('show');

                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    console.log(errorThrown);
                                    console.log(textStatus);
                                    console.log(jqXHR);
                                
                                }
                            });
                        });
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
                console.log(textStatus);
                console.log(jqXHR);
        }
    });
});

$($wikiButton).on('click',()=>{
    var marker = clickedMarker;

    $.ajax({
                                url: "getLatLngInfo.php",
                                type: 'POST',
                                data: {
                                    lat: marker.getLatLng().lat,
                                    lng: marker.getLatLng().lng
                                },
                                success: function(result) {

                                    console.log(result);
                                    $weatherButton.enable();
                                    $wikiButton.enable();
                                    $('#weather').modal('show');

                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    console.log(errorThrown);
                                    console.log(textStatus);
                                    console.log(jqXHR);

                                }
                            });
});

在单独的 AJAX 函数/API 调用中使用现有的 lat/lng 传单标记

Using existing lat/lng leaflet markers in separate AJAX function / API call

javascript

php

ajax

jquery

leaflet