在Laravel中使用Leaflet读取数据库location表经纬度并在OpenStreetMap上标记

你当前使用的是Laravel Blade模板框架，可根据数据量选择以下两种实现方案：

方案1：服务端直接渲染（适用于坐标数据量<1000条的场景） #

步骤1：控制器传递数据 #

在对应页面的控制器方法中查询location表数据，传递给视图：

// 你的控制器方法内
$locations = \App\Models\Location::select('纬度字段名', '经度字段名', '弹窗内容字段名')->get();
return view('你当前的视图文件名', compact('locations'));

注意将代码中的字段名替换为你location表内的实际字段名

步骤2：修改Blade视图的JS代码 #

替换原有手动写死标记的代码，用Blade语法循环生成标记：

@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);

   // 动态生成标记
   @foreach($locations as $loc)
   L.marker([{{$loc->纬度字段名}}, {{$loc->经度字段名}}]).addTo(map)
    .bindPopup('{{$loc->弹窗内容字段名}}');
   @endforeach
</script>
@endsection

方案2：异步接口加载（适用于数据量大、需要动态更新坐标的场景） #

步骤1：新增数据接口 #

在routes/api.php中新增接口，返回坐标数据：

Route::get('/locations', function () {
    return \App\Models\Location::select('纬度字段名', '经度字段名', '弹窗内容字段名')->get();
});

步骤2：修改前端JS代码，异步请求数据生成标记 #

// 原有地图初始化代码不变，替换手动标记部分代码即可
fetch('/api/locations')
  .then(res => res.json())
  .then(locations => {
    locations.forEach(loc => {
      L.marker([loc.纬度字段名, loc.经度字段名])
        .addTo(map)
        .bindPopup(loc.弹窗内容字段名);
    })
  })

常见问题优化 #

• 坐标数据量超过1000条时，建议使用Leaflet的标记聚合插件减少渲染压力
• 若需要点击标记展示更多自定义内容，可在location表增加对应字段，直接绑定到bindPopup方法中即可

内容的提问来源于stack exchange，提问作者SSMorgan