Question

我正在创建一个旅行门户网站，其中的地方标有谷歌地图标记。我有一个带有数据的JSON文件，我通过jQuery getJSON和.done（）加载它我创建一个循环来创建所有标记，如下所示：

<!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);
  }
  </script>
  <style>
    html, body, #map {
      height: 100%;
    }
  </style>
</head>
<body onload="initMap()">
  <div id="map">
  </div>
</div>
<script>
$(function() {
  $.ajax({
    beforeSend: function(xhr) {
      if (xhr.overrideMimeType) {
        xhr.overrideMimeType("application/json");
      }
    }
  });

  $.getJSON("js/data.json")
  .done(function(data) {
    $.each(data, function(i, item) {
      var latLng = new google.maps.LatLng(item.latitude, item.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      marker.setMap(map);
    });
  })
  .fail(function() {
    var content = '<p>Błąd wczytywania danych!</p>';
    $('#sidebar').html(content);
  });
});
</script>
</body>
</html>

主要问题是标记在首次加载时显示一次，但在重新加载页面后它们会消失。问题出在谷歌Chrome 63，Firefox 57.04。

这个问题是由循环在.done（）方法引起的吗？

我尝试过这篇文章的解决方案Google maps API v3 - Marker disappears after setPosition，但没有效果。

我也引用了google maps move marker with lat/lng from ajax success returned data。

以下是文件中的数据：

[
    {
      "id": 1,
      "category": "preserve",
      "title": "Rezerwat Miodne",
      "description": "Lorem psum dolor sit amet...",
      "latitude": "51.3789751",
      "longitude": "21.4606515",
      "photo": "miodne-splash.jpg"
    },
    {
      "id": 2,
      "category": "preserve",
      "title": "Rezerwat Okólny Ług",
      "description": "Lorem psum dolor sit amet...",
      "latitude": "51.4302652",
      "longitude": "21.570949",
      "photo": "lugi-helenowskie-splash.jpg"
    }
  ]

有什么建议吗？

谷歌在重新加载后映射标记消失

0 个答案: