集成AJAX请求后Google Map消失问题求助

我帮你排查了代码里的几个关键问题，这些就是导致地图消失、搜索功能失效的核心原因：

1. 按钮点击事件的语法错误 #

你写的按钮onclick绑定存在语法错误：

<button class="btn btn-default get_map" type="submit" onClick() = "sendLatLong()">

正确写法应该是小写onclick，去掉多余的括号和等号，错误的语法会导致事件绑定失效，甚至引发页面逻辑异常：

<button class="btn btn-default get_map" type="button" onclick="sendLatLong()">
  Locate
</button>

同时把按钮type从submit改成button，避免点击时触发表单默认提交行为（这会导致页面刷新，地图被清空）。

2. AJAX请求的语法不完整 #

你的sendLatLong函数里AJAX代码缺少闭合的});，这会导致JavaScript解析出错，直接中断后续所有代码执行（包括地图相关逻辑）：

// 错误写法
function sendLatLong(){
  var Lat = $('.search_latitude').val();
  var Long = $('.search_longitude').val();
  $.ajax({
    type: "POST",
    url: "/latlong",
    data: { Lat : $('.search_latitude').val(), Long : $('.search_longitude').val() })
}

修复后的完整函数（还添加了调试用的回调）：

function sendLatLong(){
  var Lat = $('.search_latitude').val();
  var Long = $('.search_longitude').val();
  $.ajax({
    type: "POST",
    url: "/latlong",
    data: { 
      Lat: Lat, 
      Long: Long 
    },
    success: function() {
      console.log("经纬度已成功发送到后端");
    },
    error: function(xhr, err) {
      console.error("发送失败：", err);
    }
  });
}

3. 额外优化建议 #

你在自动补全的select事件里调用了initialize()，这会重复创建地图实例，其实直接更新标记位置和地图中心即可，避免不必要的性能开销：

select: function (event, ui) {
  $('.search_addr').val(ui.item.value);
  $('.search_latitude').val(ui.item.lat);
  $('.search_longitude').val(ui.item.lon);
  var latlng = new google.maps.LatLng(ui.item.lat, ui.item.lon);
  marker.setPosition(latlng);
  map.setCenter(latlng);
  // 移除initialize()调用，避免重复创建地图
}

修复以上问题后，点击"Locate"按钮时，AJAX会正常将经纬度发送到Spring MVC控制器，同时地图不会消失、搜索功能也能正常工作。

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