Laravel中如何将Google Maps标记经纬度传递至Blade视图

我来给你梳理两种实用的方法，搞定把Google Maps标记的经纬度传到Laravel Blade视图的需求：

方法一：通过表单隐藏字段提交（适合需要提交表单的场景） #

这种方式适合你需要把位置和其他表单数据一起提交给后端的情况：

1. 在Blade视图的表单中添加隐藏输入框
   先在你的表单里加两个隐藏字段，用来存经纬度：

   <form id="locationForm" action="{{ route('save.location') }}" method="POST">
       @csrf
       <!-- 隐藏字段用于存储经纬度 -->
       <input type="hidden" id="latInput" name="latitude" value="">
       <input type="hidden" id="lngInput" name="longitude" value="">
       <!-- 你的其他表单字段 -->
       <button type="submit">保存位置</button>
   </form>
   

2. 修改Google Maps JS代码，赋值给隐藏字段
   你已经能获取到经纬度了，现在把值塞到隐藏输入框里：

   function placeMarker(location) {
       if (marker) {
           marker.setPosition(location);
       } else {
           marker = new google.maps.Marker({
               position: location,
               map: map,
               title: 'هنا يقع العقار',
               icon: markerUrl,
           });
       }
       // 获取经纬度
       const positionLat = marker.getPosition().lat();
       const positionLng = marker.getPosition().lng();
       
       // 把值赋值给隐藏输入框
       document.getElementById('latInput').value = positionLat;
       document.getElementById('lngInput').value = positionLng;
   }
   

3. 后端控制器接收并传递到视图
   在控制器里拿到经纬度，处理后（比如存数据库）再传给Blade视图：

   public function saveLocation(Request $request)
   {
       // 获取表单提交的经纬度
       $latitude = $request->input('latitude');
       $longitude = $request->input('longitude');
       
       // 这里可以做保存到数据库、数据校验等操作
       // ...
       
       // 把经纬度传递给Blade视图
       return view('your-target-view', compact('latitude', 'longitude'));
   }
   

4. 在Blade视图中直接使用变量
   现在就能在视图里直接输出经纬度了：

   <div class="location-info">
       标记的纬度：{{ $latitude }}<br>
       标记的经度：{{ $longitude }}
   </div>
   

方法二：通过AJAX异步传递（适合无刷新场景） #

如果不需要刷新页面，想实时把经纬度传给后端并更新页面内容，用AJAX更合适：

1. 修改JS代码，发送AJAX请求
   获取经纬度后，用fetch发送请求给后端：

   function placeMarker(location) {
       if (marker) {
           marker.setPosition(location);
       } else {
           marker = new google.maps.Marker({
               position: location,
               map: map,
               title: 'هنا يقع العقار',
               icon: markerUrl,
           });
       }
       const positionLat = marker.getPosition().lat();
       const positionLng = marker.getPosition().lng();
       
       // 发送AJAX请求
       fetch('{{ route('process.location') }}', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
               'X-CSRF-TOKEN': '{{ csrf_token() }}' // 别忘了Laravel的CSRF令牌
           },
           body: JSON.stringify({
               latitude: positionLat,
               longitude: positionLng
           })
       })
       .then(response => response.json())
       .then(data => {
           // 拿到后端返回的数据，更新页面显示
           document.getElementById('location-display').innerHTML = `
               当前标记位置：<br>
               纬度：${data.latitude} <br>
               经度：${data.longitude}
           `;
       })
       .catch(error => console.error('请求出错：', error));
   }
   

2. 后端控制器处理并返回JSON
   控制器接收参数，处理后返回JSON响应：

   public function processLocation(Request $request)
   {
       $latitude = $request->input('latitude');
       $longitude = $request->input('longitude');
       
       // 这里可以做实时处理，比如查询附近地点、计算距离等
       // ...
       
       // 返回经纬度数据给前端
       return response()->json([
           'latitude' => $latitude,
           'longitude' => $longitude
       ]);
   }
   

3. 在Blade视图中添加显示区域
   留个容器用来展示后端返回的经纬度：

   <div id="location-display" class="location-info"></div>
   

另外补充一句：如果只是在当前页面前端展示经纬度，其实不用传到后端，直接用JS把值插到DOM里就行；但如果需要后端处理数据（比如存库、计算），上面两种方法就完全够用了。

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