模态框中Google Maps加载Ajax返回经纬度问题求助

核心步骤拆解 #

• 确保Ajax请求能正确获取经纬度数据
• 正确初始化/更新Google Maps实例，定位到目标经纬度

代码修正示例 #

1. 前端Ajax请求与地图更新代码 #

// 假设按钮ID为loadMapBtn，模态框内地图容器ID为mapContainer
document.getElementById('loadMapBtn').addEventListener('click', function() {
  // 发起Ajax请求
  fetch('test2.php')
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    })
    .then(data => {
      // 验证经纬度数据有效性
      if (data.lat && data.lng && !isNaN(data.lat) && !isNaN(data.lng)) {
        // 初始化或更新地图
        initMap(data.lat, data.lng);
      } else {
        console.error('无效的经纬度数据');
      }
    })
    .catch(error => {
      console.error('请求错误:', error);
    });
});

// 地图初始化函数
function initMap(lat, lng) {
  const mapContainer = document.getElementById('mapContainer');
  // 检查是否已存在地图实例，避免重复初始化
  if (window.mapInstance) {
    // 更新地图中心
    window.mapInstance.setCenter(new google.maps.LatLng(lat, lng));
    // 添加标记（可选）
    new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: window.mapInstance
    });
    return;
  }
  // 首次初始化地图
  window.mapInstance = new google.maps.Map(mapContainer, {
    center: new google.maps.LatLng(lat, lng),
    zoom: 12 // 可根据需求调整缩放级别
  });
  // 添加标记
  new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: window.mapInstance
  });
}

2. test2.php后端代码示例 #

<?php
// 假设从数据库查询经纬度
// 这里替换为你的数据库查询逻辑
$db = new mysqli('localhost', 'username', 'password', 'database');
if ($db->connect_error) {
  http_response_code(500);
  echo json_encode(['error' => '数据库连接失败']);
  exit;
}

$query = "SELECT lat, lng FROM your_table WHERE id = 1"; // 替换为你的查询条件
$result = $db->query($query);
if ($result->num_rows > 0) {
  $row = $result->fetch_assoc();
  echo json_encode([
    'lat' => (float)$row['lat'],
    'lng' => (float)$row['lng']
  ]);
} else {
  http_response_code(404);
  echo json_encode(['error' => '未找到经纬度数据']);
}
$db->close();
?>

常见问题排查 #

• 检查浏览器控制台是否有报错，比如跨域问题、Google Maps API密钥是否正确配置
• 确认test2.php返回的是合法的JSON格式，且经纬度为数值类型
• 确保模态框显示后，地图容器已经有正确的宽高样式，否则地图可能无法正常渲染

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