从传单中的数据库加载标记

Question

在 Laravel 的视图刀片中，我从数据库中提取数据并制作了一个表格。

<table id="companies" class="table table-bordered">
        <thead>
            <tr>
                <th>Companies</th>
                <th>Devices</th>
                <th>X</th>
                <th>Y</th>
                <th>Time</th>
                <th>Vehicles</th>
                <th>Drivers</th>
            </tr>
        </thead>
        </p>
        <tbody>
        @foreach ($satwork as $row)

            <tr>
                <td>{{ $row -> company_name}}</td>
                <td>{{ $row -> device_type}}</td>
                <td>{{ $row -> x}}</td>
                <td>{{ $row -> y}}</td>
                <td>{{ $row -> datetime}}</td>
                <td>{{ $row -> license_plate}}</td>
                <td>{{ $row -> driver_name}}</td>
            </tr>
            @endforeach
        </tbody>
    </table>

在 Leaflet 中，我有代码通过该表从数据库中提取数据，并将其显示在地图上。

var koordinate = {!! json_encode($device->toArray()) !!};
    console.log(koordinate);

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

        .addTo(map);
        }
    }

我需要一种方法，如何将所有数据直接从数据库中提取到 Leaflet，而无需与视图刀片接触。这甚至可能吗？

Answer 1

为此，您可以使用 javascript HTTP 请求来例如返回所有数据的 API。

你可以使用 Laravel 的内置 API 功能，并在routes/api.php 中创建一个返回所有数据的新路由，注意这样，其他人也可能能够获取这些数据，这意味着你必须确保以某种方式保护您的数据。

由于我在项目中一直使用 JQuery，所以我使用 JQuery getJSON() 方法获取所有数据，然后使用 javascript 显示。

也许这样的东西可以工作？ （我没有测试过）：

    var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png', {
        attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
    });

    var map = L.map('map')
        .addLayer(mapboxTiles)
        .setView([42.444508, -76.499491], 12);

    // THIS IS NEW
    var promise = $.getJSON("businesses.json");
    promise.then(function(data) {
      data.forEach(koordinate => {
        if(koordinate[i].x && koordinate[i].y){
           var marker = L.marker([koordinate[i].x, koordinate[i].y])
             .bindPopup("Device: "+koordinate[i].device_type+'<br>' + "Time: "+koordinate[i].time).addTo(map);
        }
      })
    });

来自http://bl.ocks.org/zross/40d24941a46bff313c65