Google Maps标记页面重载后消失问题求助

你的问题核心在于地图初始化与AJAX请求的执行顺序不一致：

• 页面首次加载时，AJAX请求需要从服务器拉取JSON数据，耗时相对较长，等到done回调执行时，initMap已经通过body onload完成了地图初始化，map变量是有效的，所以标记能正常添加。
• 页面重载时，浏览器会缓存JSON数据，AJAX请求几乎瞬间完成，而body onload触发的initMap（等待所有资源加载完成）可能还没执行，此时map变量还是undefined，marker.setMap(map)相当于把标记加到了空对象上，自然看不到标记。

另外你的代码里还有一个无效的$.ajax()调用（没有指定URL和请求类型），可以直接移除。同时JSON里的经纬度是字符串类型，最好显式转为数字，避免隐式转换的潜在问题。

具体解决方案 #

方案1：将AJAX请求放到地图初始化完成后执行 #

把加载JSON和创建标记的代码移到initMap函数内部，确保地图完全初始化后再拉取数据创建标记：

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var map;
function initMap() {
  var mapOptions = {
    center: new google.maps.LatLng(51.4717161, 21.4709998),
    zoom: 11
  };
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
  // 地图初始化完成后再加载JSON数据
  $.getJSON("js/data.json")
    .done(function(data) {
      $.each(data, function(i, item) {
        // 显式将字符串经纬度转为数字
        var latLng = new google.maps.LatLng(
          parseFloat(item.latitude), 
          parseFloat(item.longitude)
        );
        var marker = new google.maps.Marker({ position: latLng });
        marker.setMap(map);
      });
    })
    .fail(function() {
      var content = '<p>Błąd wczytywania danych!</p>';
      // 注意：你的页面里没有#sidebar元素，需要确认是否存在，或者改为其他容器
      $('#sidebar').html(content);
    });
}
</script>
<style>
html, body, #map { height: 100%; margin: 0; padding: 0; }
</style>
</head>
<body onload="initMap()">
<div id="map"></div>
<!-- 如果需要显示错误信息，添加这个容器 -->
<div id="sidebar"></div>
</body>
</html>

方案2：用Promise同步地图初始化和AJAX请求 #

如果希望保持代码结构分离，可以把地图初始化包装成Promise，等待地图初始化完成后再执行AJAX：

var map;
function initMap() {
  return new Promise(function(resolve) {
    var mapOptions = {
      center: new google.maps.LatLng(51.4717161, 21.4709998),
      zoom: 11
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    resolve(map);
  });
}

$(function() {
  // 等待地图初始化完成
  initMap().then(function(map) {
    $.getJSON("js/data.json")
      .done(function(data) {
        $.each(data, function(i, item) {
          var latLng = new google.maps.LatLng(
            parseFloat(item.latitude), 
            parseFloat(item.longitude)
          );
          var marker = new google.maps.Marker({ position: latLng, map: map });
        });
      })
      .fail(function() {
        var content = '<p>Błąd wczytywania danych!</p>';
        $('#sidebar').html(content);
      });
  });
});

同时记得把body onload="initMap()"移除，因为现在是通过jQuery的DOM ready来触发地图初始化。

额外注意点 #

• 检查页面中的#sidebar元素是否存在，否则错误信息无法显示，可以改为$('body').append(content)临时调试。
• 确保你的Google Maps API密钥有效，并且没有开启不必要的限制导致请求失败。
• 可以在done回调里添加console.log(map)来验证地图对象是否存在，方便排查问题。

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