映射中循环的Javascript

如果你正在阅读，我已经试着理解/想出如何做到这一点好几天了

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

我甚至有一个javascript函数，可以打印每个客户机的数组纬度和经度，这样我就知道它是有效的

我只需要在map函数中包含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>

新代码

---

我相信您希望使用一个返回数组的函数：

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

或者，使用数据映射：

---

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

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

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

你能给我们展示一下调用includes/get\u dash\u map.php-console.logdata后得到的json示例吗that@Jamiec当我使用修改过的代码时，我什么也得不到。它没有显示地图。它甚至没有显示来自get_dash_地图的请求。我想你误解我了。行const data_u3;=JSON.parsevalue_3;后的直接位置；如果你把console.logdata放进去，你在控制台里看到什么了吗？@jamice-oh好的。不，我什么也没看到。那么你的问题不是你的地图，而是你的ajax请求！在你得到一些东西之前，你所做的任何事情都不会在地图上显示任何东西。我没有什么？我只是尝试了你的版本-但地图仍然没有显示。我刚刚意识到，当我进入我的get_dash_地图页面时，它回显了客户的纬度[此处的值]和经度[此处的值]，这会破坏地图，因为它只想读取值，不是字符串。现在我已经这样做了，它有一个关于值的最终[]。我怎样才能去掉这些？嗯，我不知道，如果不看你的密码，很难盲目回答。此外，这是另一个问题，所以这应该作为一个新问题来问。我正在使用这个：但它仍然不会显示地图。我刚刚意识到，当我进入我的get_dash_地图页面时，它回显了客户端的纬度[这里的值]和经度[这里的值]，这会破坏地图，因为它只想读取值，而不是字符串。现在我已经做到了，它有一个最后的[]。我刚刚去掉了这些方括号，现在我明白了。你知道为什么我的地图仍然没有显示吗@Ben，请在您的问题中添加includes/get_dash_map.php的回复。看起来我们对它的分析不正确。从你的问题我可以猜到我一定是这样的：[{客户纬度：23.456，客户经度：-76.456，名字：'Ben'}，{客户纬度：25.456，客户经度：-80.456，名字：'Jack'}，{客户经度：26.456，客户经度：-99.456，名字：'Charlie'}，…]不。当我打印客户经度和客户经度时，它向他们展示了所有这还没有显示我的地图。我的值应该返回是正确的吗

<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>

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

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

$.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'}
            })
        })
     }
 });