Javascript for loop in map

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，因爲它是一個循環，因此它是可變的。