Leaflet 中的数据库映射（JSON、AJAX）答案

【问题标题】：Database mapping in Leaflet with (JSON, AJAX)Leaflet 中的数据库映射（JSON、AJAX）
【发布时间】：2020-04-04 19:15:41
【问题描述】：

我从 DeviceNewController 得到这个 JSON

 public function index(Request $request)
{
    $device_new = Device_new::with(['device']);

    return Device_new::all()->toJson();
}

当我在视图刀片中编写 AJAX 时，它会在控制台中显示来自数据库的数据。

<script>
    var newdev = new XMLHttpRequest();
    newdev.open('GET', '/devices_new');
    newdev.onload = function() {
        console.log(newdev.responseText);
    };
    newdev.send();
</script>

但我需要在 Leaflet 脚本中传递它并在地图上写入所有数据（坐标、标记、设备信息）

当我在一个脚本中设置所有内容时，控制台中没有数据，我无法修复它。

var newdev = new XMLHttpRequest();
    newdev.open('GET', '/devices_new');
    newdev.onload = function() {
        var coordinates = newdev.responseText;

    for (var i=0; i < coordinates.length; i++) {
        if(coordinates[i].x && coordinates[i].y){
        var marker = L.marker([coordinates[i].x, coordinates[i].y])
        .bindPopup("Device: "+coordinates[i].device_type+'<br>' + "Time: "+coordinates[i].datetime)

        .addTo(map);
        }
    };
    };
    newdev.send();

我是不是在某个地方弄错了，这对吗？？？

【问题讨论】：

标签： json ajax database laravel leaflet

【解决方案1】：

你错过了理解 Ajax。 Ajax 是来自 JS 库 JQuery 的一个函数。

ajax() 方法用于执行 AJAX（异步 HTTP）请求。

您必须将 JQuery 库添加到您的源代码中，然后您才能创建 Ajax 调用。

https://www.w3schools.com/jquery/ajax_ajax.asp

$.ajax({url: "/devices_new", success: function(result){
     //result = JSON.parse(result); // If your result is not a json Object.
     var coordinates = result;

    for (var i=0; i < coordinates.length; i++) {
        if(coordinates[i].x && coordinates[i].y){
        var marker = L.marker([coordinates[i].x, coordinates[i].y])
        .bindPopup("Device: "+coordinates[i].device_type+'<br>' + "Time: "+coordinates[i].datetime)

        .addTo(map);
        }
    }
  },
   error: function(xhr){
      alert("An error occured: " + xhr.status + " " + xhr.statusText);
    }});

});

【讨论】：

是否可以通过该功能在刀片中临时显示“结果”？同时将数据发送到地图？
console.log(result)。 “同一时间”是什么意思？从“devices_new”获取数据后，函数success 被调用。然后你可以用这些数据做你想做的事。如果您在控制台中打印出来，您的数据不会消失。
document.getElmentById('divid').innerHTML=JSON.stringify(result);

【解决方案2】：

我是这样做的，而且它的工作原理。

<script>
    $(document).ready(function() {
        $.ajax({
            /* the route pointing to the post function */
            url: '/device_new',
            type: 'GET',
            data: {
                message: $(".getinfo").val()
            },
            dataType: 'json',
            /* remind that 'data' is the response of the AjaxController */
            success: function(data) {
                var coordinates = data;
                for (var i = 0; i < coordinates.length; i++) {
                    if (coordinates[i].x && coordinates[i].y) {
                        var marker = L.marker([coordinates[i].x, coordinates[i].y])
                            .bindPopup("Device: " + coordinates[i].device_type + '<br>' + "Time: " + coordinates[i].datetime)

                            .addTo(map);
                    }
                }

                console.log(data);
            },
            error: function(data) {
                console.log(data);
            }


        });
    });
</script>

【讨论】：