如何通过Google Maps API+jQuery/Ajax获取地址经纬度并提交参数至URL

1. 完善HTML结构 #

添加隐藏的纬度、经度字段，确保表单可承载所需参数：

<form id="addressForm" method="GET">
  <label for="address">地址/邮政编码:</label>
  <input type="text" id="address" name="address" required>
  
  <!-- 隐藏字段，用于存储经纬度 -->
  <input type="hidden" id="lat" name="lat">
  <input type="hidden" id="long" name="long">
  
  <button type="submit">提交</button>
</form>

2. 引入依赖脚本 #

在HTML底部引入jQuery和Google Maps地理编码API（替换YOUR_API_KEY为你的实际密钥）：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geocoding"></script>

3. 编写核心JavaScript逻辑 #

实现地址解析、字段填充和表单提交跳转：

$(document).ready(function() {
  // 封装地理编码函数，返回Promise处理异步结果
  function geocodeAddress(address) {
    const geocoder = new google.maps.Geocoder();
    return new Promise((resolve, reject) => {
      geocoder.geocode({ address: address }, (results, status) => {
        if (status === google.maps.GeocoderStatus.OK) {
          const lat = results[0].geometry.location.lat();
          const lng = results[0].geometry.location.lng();
          resolve({ lat, lng });
        } else {
          reject(`地址解析失败: ${status}`);
        }
      });
    });
  }

  // 监听地址输入框失焦事件，提前解析经纬度
  $('#address').on('blur', async function() {
    const address = $(this).val().trim();
    if (address) {
      try {
        const coords = await geocodeAddress(address);
        $('#lat').val(coords.lat);
        $('#long').val(coords.lng);
      } catch (err) {
        alert(err);
        $('#lat').val('');
        $('#long').val('');
      }
    }
  });

  // 监听表单提交事件，确保经纬度有效后跳转
  $('#addressForm').on('submit', async function(e) {
    e.preventDefault();
    const address = $('#address').val().trim();
    let lat = $('#lat').val();
    let lng = $('#long').val();

    // 若之前未解析成功，提交时再次尝试
    if (!lat || !lng) {
      try {
        const coords = await geocodeAddress(address);
        lat = coords.lat;
        lng = coords.lng;
        $('#lat').val(lat);
        $('#long').val(lng);
      } catch (err) {
        alert(err);
        return;
      }
    }

    // 构造编码后的URL并跳转
    const url = `join.php?address=${encodeURIComponent(address)}&lat=${lat}&long=${lng}`;
    window.location.href = url;
  });
});

关键细节说明 #

• 地理编码处理：利用Google Maps Geocoder服务将地址/邮编转换为经纬度，同时处理API返回的状态码，比如ZERO_RESULTS代表地址无法识别。
• 异步优化：用Promise和async/await处理API异步请求，避免嵌套回调。
• 用户体验：输入框失焦时提前解析经纬度，减少提交等待时间；解析失败时弹出提示，清空无效字段。
• URL安全：用encodeURIComponent()编码地址参数，避免特殊字符破坏URL结构。

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