如何将Google Maps API v3拖拽标记的经纬度保存到MySQL数据库？

一、前端修改：捕获经纬度并发送到后端 #

修改你的initMap函数，在标记拖拽结束时，既更新页面显示，又通过AJAX将经纬度发送到后端接口；也可以存入隐藏表单，支持用户手动提交（可选）。

修改后的JS代码：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 7,
    center: new google.maps.LatLng(52.215594, 21.014130),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(52.215594, 21.014130),
    draggable: true
  });

  // 拖拽结束事件：更新显示+提交数据
  google.maps.event.addListener(myMarker, 'dragend', function(evt) {
    var lat = evt.latLng.lat().toFixed(6);
    var lng = evt.latLng.lng().toFixed(6);
    
    // 更新页面显示
    document.getElementById('current').innerHTML = `<p>Marker dropped: Current Lat: ${lat} Current Lng: ${lng}</p>`;
    
    // 方式1：AJAX自动提交到后端
    fetch('save_coords.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `lat=${lat}&lng=${lng}`
    })
    .then(response => response.text())
    .then(data => {
      console.log('保存结果:', data);
      // 可添加成功提示，比如更新页面元素
    })
    .catch(error => {
      console.error('保存失败:', error);
    });

    // 方式2：存入隐藏表单，供用户手动提交（可选）
    document.getElementById('hidden_lat').value = lat;
    document.getElementById('hidden_lng').value = lng;
  });

  google.maps.event.addListener(myMarker, 'dragstart', function(evt) {
    document.getElementById('current').innerHTML = '<p>Moving marker...</p>';
  });

  map.setCenter(myMarker.position);
  myMarker.setMap(map);
}

若使用手动提交方式，需在页面添加表单：

<form action="save_coords.php" method="post">
  <input type="hidden" id="hidden_lat" name="lat">
  <input type="hidden" id="hidden_lng" name="lng">
  <button type="submit">保存坐标</button>
</form>

二、后端处理（结合Smarty框架） #

创建save_coords.php脚本，负责接收前端参数、验证并写入MySQL数据库。

1. 核心逻辑代码 #

<?php
// 引入Smarty类文件（根据项目实际路径调整）
require_once('libs/Smarty.class.php');
$smarty = new Smarty();

// 数据库配置（替换为你的实际信息）
$db_host = 'localhost';
$db_user = 'your_db_user';
$db_pass = 'your_db_password';
$db_name = 'your_db_name';

// 建立数据库连接
$conn = new mysqli($db_host, $db_user, $db_pass, $db_name);
if ($conn->connect_error) {
  die("数据库连接失败: " . $conn->connect_error);
}

// 接收并验证前端参数
$lat = isset($_POST['lat']) ? trim($_POST['lat']) : '';
$lng = isset($_POST['lng']) ? trim($_POST['lng']) : '';

// 简单校验经纬度合法性
if (is_numeric($lat) && is_numeric($lng) && $lat >= -90 && $lat <= 90 && $lng >= -180 && $lng <= 180) {
  // 插入数据库（假设表名为map_coords，包含id、lat、lng、created_at字段）
  $stmt = $conn->prepare("INSERT INTO map_coords (lat, lng, created_at) VALUES (?, ?, NOW())");
  $stmt->bind_param("dd", $lat, $lng); // "dd"表示两个double类型参数

  if ($stmt->execute()) {
    echo "坐标保存成功，ID: " . $stmt->insert_id;
    // 若需用Smarty渲染结果页面，可替换为以下代码
    // $smarty->assign('success_msg', "坐标保存成功，ID: {$stmt->insert_id}");
    // $smarty->display('result.tpl');
  } else {
    echo "保存失败: " . $stmt->error;
  }

  $stmt->close();
} else {
  echo "无效的经纬度参数";
}

$conn->close();
?>

2. Smarty模板集成（可选） #

若需在页面展示保存结果，创建result.tpl模板：

<!DOCTYPE html>
<html>
<head>
  <title>保存结果</title>
</head>
<body>
  {if isset($success_msg)}
    <div class="success">{$success_msg}</div>
  {elseif isset($error_msg)}
    <div class="error">{$error_msg}</div>
  {/if}
  <a href="map_page.php">返回地图页面</a>
</body>
</html>

三、关键注意事项 #

• 安全防护：使用预处理语句避免SQL注入，同时校验经纬度的数值范围，防止非法输入。
• 数据库表结构：确保已创建对应的数据表，示例SQL：

CREATE TABLE map_coords (
  id INT AUTO_INCREMENT PRIMARY KEY,
  lat DOUBLE NOT NULL,
  lng DOUBLE NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

• 跨域问题：确保前端页面与后端接口在同一域名下，若跨域需配置CORS规则。

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