如何使用来自for循环的多个位置的数据作为传单标记以在点击事件中使用

Question

我有一张传单地图，上面有标记显示所选国家/地区的热门城市。

locationList 是一个对象数组，每个对象都包含每个城市的信息（lat、lng、cityName）。这些值用于在地图上添加标记，并且还被字符串化以用于 PHP 对天气 API cURL 例程的调用。

我已经通过 for 循环成功地在地图上添加了显示每个城市名称的弹出窗口，但是我希望能够为每个标记添加功能，以便当您单击任何 $cityMarker 天气该特定位置的数据以模式弹出（在 AJAX 调用之后）。

目前这仅适用于 locationList 数组中的最终对象，因为点击事件和后续 AJAX 调用仅从点击事件处理程序之前循环的最后一项触发。

有没有一种简单的方法可以解决这个问题，以便根据单击的位置为所有位置触发点击事件？我不知道如何从循环中获取所有数据以在 $cityMarker 中单独使用。

谢谢！

                    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++) {
                        console.log(locationList[i])
                        $cityMarker = L.marker(new L.latLng([locationList[i]['lat'], locationList[i]['lng']]))
                        .addTo($layers)
                        .bindPopup('Name: ' + locationList[i]['cityName'])
                    }
                
                        $($cityMarker).on('click', () => {
                            $.ajax({
                                url: "getInfo.php",
                                type: 'POST',
                                data: {
                                    locationList: JSON.stringify(locationList)
                                },
                                success: function(result) {
                    
                                    console.log(result);

                                    for (let i=0; i < result.data.length; i++) {
                                        $('.modal').modal('show');
                                        $('#openWeatherResult').html(result['data'][i]['openWeather']['weather'][0]['description'])
                                    }                                       

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

PHP:

<?php


    ini_set('display_errors', 'On');
    error_reporting(E_ALL);

    $executionStartTime = microtime(true) / 1000;
    
    $locationList = json_decode($_POST['locationList'], true);

    $locationArray = [];
    
    foreach ($locationList as $location){
        $data['lat'] = $location['lat'];
        $data['lng'] = $location['lng'];
        array_push($locationArray, $data);
    }

    // openweather routine

    foreach ($locationArray as $location){
        $lat = $location['lat'];
        $lng = $location['lng'];
    
        $openWeatherUrl='api.openweathermap.org/data/2.5/weather?lat=' . $lat . '&lon='  . $lng  . '&units=metric&appid=demo';
    
        $openWeatherch = curl_init();
        curl_setopt($openWeatherch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($openWeatherch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($openWeatherch, CURLOPT_URL,$openWeatherUrl);
    
        $openWeatherResult = curl_exec($openWeatherch);
    
        curl_close($openWeatherch);
    
        $openWeather = json_decode($openWeatherResult, true);
    
        $output['data'][] = ['location' => $location, 'openWeather' => $openWeather];
    }
    
    $output['status']['code'] = "200";
    $output['status']['name'] = "ok";
    $output['status']['description'] = "mission saved";
    $output['status']['returnedIn'] = (microtime(true) - $executionStartTime) / 1000 . " ms";
    
    header('Content-Type: application/json; charset=UTF-8');
    
    echo json_encode($output);

?>

Answer 1

在循环中移动 click 侦听器：

 for (var i = 0; i < locationList.length; i++) {
    console.log(locationList[i])
    const $cityMarker = L.marker(new L.latLng([locationList[i]['lat'], locationList[i]['lng']]))
        .addTo($layers)
        .bindPopup('Name: ' + locationList[i]['cityName'])

    $($cityMarker).on('click', () => {
        $.ajax({
            url: "getInfo.php",
            type: 'POST',
            data: {
                locationList: JSON.stringify(locationList)
            },
            success: function(result) {

                console.log(result);

                for (let i = 0; i < result.data.length; i++) {
                    $('.modal').modal('show');
                    $('#openWeatherResult').html(result['data'][i]['openWeather']['weather'][0]['description'])
                }

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

编辑您的问题是您总是加载所有天气数据并循环遍历数据。在下一步中，您更改 $('#openWeatherResult') 的 html / 文本，但它不能有多个 htmls / 文本，因此它总是覆盖之前的文本......所以它总是显示循环的最后一个条目。

我建议您覆盖/创建新的 php 文件以加载单个条目的数据：getSingleInfo.php

<?php


    ini_set('display_errors', 'On');
    error_reporting(E_ALL);

    $executionStartTime = microtime(true) / 1000;
    
  
        $lat = $_POST['lat'];
        $lng = $_POST['lng'];
    
        $openWeatherUrl='api.openweathermap.org/data/2.5/weather?lat=' . $lat . '&lon='  . $lng  . '&units=metric&appid=demo';
    
        $openWeatherch = curl_init();
        curl_setopt($openWeatherch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($openWeatherch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($openWeatherch, CURLOPT_URL,$openWeatherUrl);
    
        $openWeatherResult = curl_exec($openWeatherch);
    
        curl_close($openWeatherch);
    
        $openWeather = json_decode($openWeatherResult, true);
    
        $output['data'][] = ['location' => $location, 'openWeather' => $openWeather];
    
    
    $output['status']['code'] = "200";
    $output['status']['name'] = "ok";
    $output['status']['description'] = "mission saved";
    $output['status']['returnedIn'] = (microtime(true) - $executionStartTime) / 1000 . " ms";
    
    header('Content-Type: application/json; charset=UTF-8');
    
    echo json_encode($output);

?>

然后将您的 ajax 调用更改为：

$($cityMarker).on('click', (e) => {
        var marker = e.target;
        $.ajax({
            url: "getSingleInfo.php",
            type: 'POST',
            data: {
                lat: marker.getLatLng().lat,
                lng: marker.getLatLng().lng,
            },
            success: function(result) {

如何使用来自for循环的多个位置的数据作为传单标记以在点击事件中使用

How to use multiple locations' data from for loop as leaflet markers to use in click event

javascript

ajax

jquery

for-loop

leaflet