如何将Leaflet当前坐标传递至Laravel控制器作为变量使用

使用Leaflet-Coordinate插件做坐标半径筛选数据时，硬编码坐标到Laravel控制器功能可正常运行，需要实现获取Leaflet地图当前定位坐标，传入控制器替换硬编码值的功能。

原有代码片段 #

前端Leaflet初始化代码 #

var map = L.map('map', 15);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 17,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoiZGFuaWVscmFjaGV2YXNraSIsImEiOiJjbDFlZzBpN2wwcjE1M2ZuNHF3NXRvbGh5In0.U44yx8ueWFpYviMcI1U1Sw'
}).addTo(map);

map.locate({setView: true});

map.on('locationfound', function(e) {
    console.log(e.latlng.lat, e.latlng.lng);
    var lat = e.latlng.lat;
    var lng = e.latlng.lng;
    // 待实现：将坐标传入后端控制器
})

控制器原有逻辑 #

public function mainpagebenef(){
    //$lat = $request->get('lat');
    //$lng = $request->get('lng');
    $beneficiary = beneficiary::nearby([
        1.4701624933456898, // 待替换为前端实时定位坐标
        110.42952010069433 // 待替换为前端实时定位坐标
        ],0.5)->closest()
        ->where('status', '=', 'Mahu Bantuan')->get();
    $donor = DB::table('donor')->get();
    return view('mainpagebenef', ['beneficiary' => $beneficiary], ['donor' => $donor]);
}

路由定义 #

Route::get('/mainpagebenef', 'mainpagecontroller@mainpagebenef')->name('mainpagebenef');

分三步调整代码即可：

第一步：调整控制器方法 #

在控制器顶部引入Request类，修改方法接收请求参数，给经纬度设置默认值兜底，避免定位失败或者首次加载时报错：

// 控制器文件顶部引入
use Illuminate\Http\Request;

public function mainpagebenef(Request $request)
{
    // 优先取前端传入的坐标，无传参时使用原有硬编码坐标兜底
    $lat = $request->query('lat', 1.4701624933456898);
    $lng = $request->query('lng', 110.42952010069433);

    $beneficiary = beneficiary::nearby([$lat, $lng], 0.5)
        ->closest()
        ->where('status', 'Mahu Bantuan')
        ->get();
    $donor = DB::table('donor')->get();

    // 合并视图传参，原写法传两个数组不影响运行，合并后更规范
    return view('mainpagebenef', compact('beneficiary', 'donor'));
}

现有路由不需要修改，Laravel默认会自动解析GET请求携带的查询参数。

第二步：补全前端定位回调逻辑 #

定位成功拿到经纬度后，直接携带参数跳转页面即可，逻辑最简单适合入门场景：

map.on('locationfound', function(e) {
    const lat = e.latlng.lat;
    const lng = e.latlng.lng;
    // 携带坐标参数跳转到对应路由
    window.location.replace(`${window.location.pathname}?lat=${lat}&lng=${lng}`);
})

// 必须加定位失败回调，否则用户拒绝定位权限时页面会卡住
map.on('locationerror', function() {
    // 定位失败直接加载原页面，使用控制器里的默认坐标
    window.location.replace(window.location.pathname);
})

如果不想整页刷新，也可以在定位成功后用fetch发异步请求，拿到后端返回的数据后局部更新地图上的点位，不需要跳转页面。

注意事项 #

• 浏览器定位功能要求页面运行在https环境或者localhost本地环境，否则定位会直接失败
• 不要把经纬度参数设为必填，必须保留默认值兜底，否则用户拒绝定位权限时页面会报错
• 原代码中L.map('map', 15)的写法少了第二个参数的zoom配置键，建议改成L.map('map', {zoom: 15})避免初始化异常

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