如何在Laravel Blade视图中用JS循环渲染Leaflet地图标记？

1. 控制器查询数据并传递到视图 #

首先在Laravel控制器中编写方法，从数据库获取地点数据并传递给Blade视图：

// app/Http/Controllers/LocationController.php
namespace App\Http\Controllers;

use App\Models\Location; // 替换为你的地点模型类
use Illuminate\Http\Request;

class LocationController extends Controller
{
    public function showMap()
    {
        // 仅查询需要的字段：纬度、经度、名称
        $locations = Location::select('latitude', 'longitude', 'name')->get();
        
        return view('map', compact('locations'));
    }
}

2. Blade模板中处理数据并循环创建标记 #

在Blade视图里，利用Laravel的@json指令将PHP集合转换为JavaScript数组，然后循环遍历数组生成Leaflet标记：

<!-- resources/views/map.blade.php -->
<div id="map" style="height: 500px;"></div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

<script>
// 初始化地图
var map = L.map('map').setView([-6.935118, 107.766995], 15);

// 添加OpenStreetMap瓦片层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

// 将Laravel传递的地点数据转为JS数组
var locations = @json($locations);

// 循环创建标记
locations.forEach(location => {
    // 跳过无效的经纬度数据
    if (location.latitude && location.longitude) {
        L.marker([location.latitude, location.longitude])
            .addTo(map)
            .bindPopup(location.name || '未命名地点');
    }
});
</script>

注意事项 #

• 确保模型类Location对应的数据库表中，存在latitude、longitude、name字段，字段名不符的话要同步修改代码。
• 如果需要弹窗显示更多信息，可在bindPopup中拼接HTML内容，比如：bindPopup(

  ${location.name}

  坐标：${location.latitude}, ${location.longitude}

  )。
• 若要使用自定义标记图标，可参考Leaflet官方文档的自定义marker配置，替换默认图标即可。

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