如何在Laravel控制器中获取前端JavaScript经纬度变量用于距离计算

1. 前端AJAX请求编写 #

拿到经纬度后直接拼接参数发送GET请求即可，常用实现示例：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    
    // 以axios为例发送请求，原生XMLHttpRequest、fetch同理
    axios.get('/get-nearby-pharmacies', {
      params: {
        lat: latitude,
        lng: longitude
      }
    })
    .then(function (response) {
      // 自行处理返回的药店列表数据
      console.log(response.data);
    })
    .catch(function (error) {
      console.log('请求失败', error);
    });
  });
}

也可以直接把参数拼在请求URL中：/get-nearby-pharmacies?lat=${latitude}&lng=${longitude}

2. 路由配置 #

在routes/web.php中添加对应路由，指向HomeController的处理方法：

use App\Http\Controllers\HomeController;
Route::get('/get-nearby-pharmacies', [HomeController::class, 'getNearbyPharmacies']);

如果是接口场景可以把路由放在routes/api.php中，注意接口前缀配置即可。

3. 控制器逻辑调整 #

将原有占位符替换为从请求中获取参数的逻辑即可：

use Illuminate\Http\Request;
use App\Models\Pharmacy;

public function getNearbyPharmacies(Request $request)
{
    // 先校验参数合法性
    $validated = $request->validate([
        'lat' => 'required|numeric|between:-90,90',
        'lng' => 'required|numeric|between:-180,180',
    ]);
    
    // 取出前端传递的经纬度替换原有占位符
    $userLat = $validated['lat'];
    $userLng = $validated['lng'];
    
    // 原有查询逻辑，计算20公里内的药店并按距离排序分页
    $pharmacies = Pharmacy::selectRaw("*, 
        ( 6371 * acos( cos( radians(?) ) * cos( radians( latitude ) ) * cos( radians( longitude ) - radians(?) ) + sin( radians(?) ) * sin( radians( latitude ) ) ) ) AS distance", 
        [$userLat, $userLng, $userLat])
        ->having('distance', '<', 20)
        ->orderBy('distance')
        ->paginate(10);
    
    return response()->json($pharmacies);
}

上述代码中6371为地球半径（单位：公里），如果需要用英里可以替换为3956，注意经纬度字段名要和pharmacies表的实际存储字段保持一致。

常见问题处理 #

如果请求返回419状态码，是Laravel的CSRF校验拦截了请求，在视图的<head>标签中添加CSRF标识：

<meta name="csrf-token" content="{{ csrf_token() }}">

再在AJAX全局配置中添加请求头即可，以axios为例：

axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;

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