Javascript 地图中的循环

Question

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

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

我什至有一个 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

我相信您想使用 returns 数组的函数 :

$('#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，因为它在一个循环中，所以它是可变的。

Answer 2

您可以这样添加标记：

$.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。

Javascript 地图中的循环

Javascript for loop in map

javascript

foreach

loops

jvectormap