在 laravel 中使用传单从数据库中标记位置

Question

我的数据库中有一个名为 location 的 table，它由纬度和经度组成，我需要使用 leaflet open street map 在地图上标记它们。我不知道该怎么做。到现在我只能手动标记。如果您有任何我可以了解的资源，请帮助

这是我的数据库se:

@extends('master');


@section('content');
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""></script>
<style>
    #map {position: absolute; top: 0; bottom: 0; left: 0; right: 0}
</style>
<div id="map"></div>
<script>
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a 
   href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 
   contributors'
   }).addTo(map);

   L.marker([19.0971904, 72.8891392]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();
</script>


@endsection

Answer 1

看来您可能需要使用 Ajax

<script>

    $(function(){
        $.ajax({
            url: "/leaflect",

            type: 'GET',

            success: function(data) {
                $.each(data, function( key, value ) {

                    L.marker([value.latitude, value.longitude]).addTo(map)
                        .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
                        .openPopup();
                })
            },
            error: function(data) {

            }
        });
    })
    </script>

路线会像

Route::get('leaflect',[ControllerName@methodName]);

控制器方法就像

public function methodName(){
    
    return Model::get();

}

在 laravel 中使用传单从数据库中标记位置

Mark location from database using leaflet in laravel

laravel

leaflet