Symfony 3.3中通过Google Maps API实时保存用户经纬度位置

Alright, let's get this sorted for you. You want to let users drag a Google Maps marker on their profile page, save the new coordinates in real-time without a submit button—here's a complete, step-by-step solution tailored to your Twig setup:

First, we'll add hidden input fields to store the live coordinates (so your backend can access them) and keep your existing map container:

{# 个人资料页模板 #}
<div id="map-canvas" style="width: 500px; height: 380px;"></div>

{# 隐藏字段：存储实时更新的经纬度，默认值用用户当前的坐标 #}
<input type="hidden" id="user-lat" name="user_latitude" value="{{ user.latitude ?? 40.7128 }}">
<input type="hidden" id="user-lng" name="user_longitude" value="{{ user.longitude ?? -74.0060 }}">

This code initializes the map, creates a draggable marker, listens for the drag end event, updates the hidden fields, and sends an AJAX request to save the coordinates immediately:

function initMap() {
    // 读取用户当前的经纬度（如果没有则用默认坐标）
    const initialLat = parseFloat(document.getElementById('user-lat').value);
    const initialLng = parseFloat(document.getElementById('user-lng').value);

    // 初始化地图
    const map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: { lat: initialLat, lng: initialLng },
        zoom: 12
    });

    // 创建可拖动的标记
    const marker = new google.maps.Marker({
        position: { lat: initialLat, lng: initialLng },
        map: map,
        draggable: true,
        title: "拖动我选择你的位置"
    });

    // 监听标记拖动结束事件
    marker.addListener('dragend', function(event) {
        const newLat = event.latLng.lat();
        const newLng = event.latLng.lng();

        // 更新隐藏字段的值
        document.getElementById('user-lat').value = newLat;
        document.getElementById('user-lng').value = newLng;

        // 调用保存函数
        saveUserCoordinates(newLat, newLng);
    });
}

// 发送AJAX请求保存坐标到后端
function saveUserCoordinates(lat, lng) {
    fetch('/profile/update-coords', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': '{{ csrf_token() }}' // Twig生成CSRF令牌，防止跨站请求伪造
        },
        body: JSON.stringify({
            latitude: lat,
            longitude: lng
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 可选：添加成功提示，比如弹出消息
            console.log("位置已保存！");
        } else {
            console.error("保存失败：", data.message);
        }
    })
    .catch(err => console.error("请求出错：", err));
}

// 加载Google Maps API（替换成你的API密钥）
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap"></script>

Since you're using Twig, I'll assume you're on Symfony. Here's a controller method to handle the AJAX request:

/**
 * @Route("/profile/update-coords", name="profile_update_coords", methods={"POST"})
 */
public function updateCoordinates(Request $request, UserInterface $user, EntityManagerInterface $em)
{
    $payload = json_decode($request->getContent(), true);

    // 验证请求数据
    if (!$payload || !isset($payload['latitude']) || !isset($payload['longitude'])) {
        return new JsonResponse([
            'success' => false,
            'message' => '无效的坐标数据'
        ], 400);
    }

    // 更新用户坐标并保存
    $user->setLatitude($payload['latitude']);
    $user->setLongitude($payload['longitude']);
    
    $em->persist($user);
    $em->flush();

    return new JsonResponse(['success' => true]);
}

• Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key, and make sure the Maps JavaScript API is enabled in your Google Cloud Console.
• The CSRF token is critical for security—don't skip that part if you're using a framework that requires it.
• You can enhance the user experience by adding a small success/error notification (like a toast message) instead of just logging to the console.
• Ensure your backend route is secured (only authenticated users can access it) to prevent unauthorized updates.

内容的提问来源于stack exchange，提问作者Beligh Manaï