地图中的 Javascript for 循环

Question

如果您正在阅读，我几天来一直在尝试理解/弄清楚如何做到这一点。

我正在使用 jvectormap 并已完成所有操作，例如在数组中返回我的用户纬度和经度。

我什至有一个 javascript 函数，可以打印每个客户端的纬度和经度数组，所以我知道它可以工作。

我只需要以某种方式将我的 javascript foreach 循环包含到我的地图函数中。

以下代码有效，但只能通过手动输入标记：

<script>
$.ajax({
    url: "includes/get_dash_map.php",
    context: document.body,
    type: 'POST',
    data: {get_data_:true},
    success: function(value_) {
        const data_ = JSON.parse(value_);
        const $parent = $('#all-the-coordinates');

        for(const row of data_){
            //const $element = $('<span></span>');
            //$element.text(`${row['client_latitude']}, ${row['client_longitude']}, `);
            //$parent.append($element);
        }

        $('#map').vectorMap({
            map: 'world_mill_en',
            backgroundColor: 'transparent',
            zoomOnScroll: false,
            hoverOpacity: 0.7,
            markerStyle: { initial: { fill: '#F8E23B', stroke: '#383f47' } },
            markers: [
                {latLng: ['51.5605', '0.4524'], name: 'BenzaHdd'},
            ]
        })
}})
</script>

如您所见，标记是由我手动设置的。

我需要那里的标记来循环我得到的每个用户的纬度和经度。

我尝试修改上面的代码以使其正常工作，但失败了。我的尝试看起来像这样：

<script>
$.ajax({
    url: "includes/get_dash_map.php",
    context: document.body,
    type: 'POST',
    data: {get_data_:true},
    success: function(value_) {
        const data_ = JSON.parse(value_);
        const $parent = $('#all-the-coordinates');

        $('#map').vectorMap({
            map: 'world_mill_en',
            backgroundColor: 'transparent',
            zoomOnScroll: false,
            hoverOpacity: 0.7,
            markerStyle: { initial: { fill: '#F8E23B', stroke: '#383f47' } },

            for(const row of data_) {
            //const $element = $('<span></span>');
            //$element.text(`${row['client_latitude']}, ${row['client_longitude']}, `);
            //$parent.append($element);
            markers: [ { latLng: [`${row['client_latitude']}, ${row['client_longitude']}`], name: 'Benza' } ],

            },
        })
}})
</script>

get_dash_map.php：

    $user_grab = mysqli_query($con, "SELECT * FROM users");


    while ($users_ = mysqli_fetch_array($user_grab)) {
        $client_ip = $users_['ip'];

        //This is for getting each users location on our map
        $ip               = $client_ip;
        $geocode          = 
        file_get_contents("http://freegeoip.net/json/{$ip}");
        $output           = json_decode($geocode);
        $client_latitude  = $output->latitude;
        $client_longitude = $output->longitude;

        $response_[] = [$client_latitude, $client_longitude];            
    }

    echo str_replace(array('[', ']'), '', htmlspecialchars(json_encode($response_), ENT_NOQUOTES));

新代码

<script>
function fetchMap() {
$.ajax({
url: "includes/get_dash_map.php",
context: document.body,
type: 'POST',
data: {get_data:true},
success: function(value) {

    $('#map').vectorMap({
        map: 'world_mill_en',
        backgroundColor: 'transparent',
        zoomOnScroll: false,
        hoverOpacity: 0.7,
        markerStyle: { initial: { fill: '#F8E23B', stroke: '#383f47' } },
        markers: () => value.map(row =>{ return {latLng: [`${row['0']},${row['1']}`], name: `${row['0']}`}})
        //markers: [
        //    {latLng: ['51.5605', '0.4524'], name: 'BenzaHdd'},
        //]
    })
   },
});
}
$(document).ready(function() { fetchMap(); });
</script>

Answer 1

您可以通过这种方式添加标记：

$.ajax({
    url: "includes/get_dash_map.php",
    context: document.body,
    type: 'POST',
    data: {get_data_:true},
    dataType: 'json',
    success: function(data_) {
        const $parent = $('#all-the-coordinates');

        $('#map').vectorMap({
            map: 'world_mill_en',
            backgroundColor: 'transparent',
            zoomOnScroll: false,
            hoverOpacity: 0.7,
            markerStyle: { initial: { fill: '#F8E23B', stroke: '#383f47' } },
            markers: data_.map(function(row){
                 return {latLng: [row[0], row[1]], name: 'Ben'}
            })
        })
     }
 });

但我宁愿在服务器端准备正确的 json。

Answer 2

我相信你想使用一个返回数组的函数：

$('#map').vectorMap({
     markers: () => {
         let markers_array = [];
         for(let row of data_) {
              markers_array.push( {latLng... } )  // Make your loop here
          }
          return markers_array;
     }
})

或者，使用data_.map()：

$('#map').vectorMap({
     markers: () => data_.map( row => {
          return { row.latLng... } // Make your loop here
     })
})

我使用 ES6 是因为你使用了 const 关键字。就此而言，它不应该是const，而是let，因为它处于循环中，所以它是可变的。