Google Maps JS API + JSON - 多个标记未显示

Question

所以，我需要的非常简单，我需要在地图中放置标记，我从使用 PHP 构建的 JSON 中获取数据。我查了所有其他关于谷歌地图标记没有出现的问题（真的），但没有一个对我有用。我在我的代码中找不到缺陷。

JSON 是这样的（但长度为 58 项），'id' 不重要：

[
  {
    "id": "2",
    "lat": "-49.217290",
    "lon": "-16.416160",
    "tit": "Heinz",
    "desc": "18 Machines"
  },
  {
    "id": "3",
    "lat": "-49.235455",
    "lon": "-16.676926",
    "tit": "Warehouse",
    "desc": "10 Machines"
  }
]

我是新来的，如果我做错了什么，请见谅。我的代码如下：

    <div id="map" class="height-400"></div>
    <script>
        var map;
        var myLatLon = {lat: -16.398293, lng: -48.965098};
        var markers = [];

        $.ajax({
            dataType:'json',
            url: "contents/map_data.php",
            success: function(data){
                markers = data;
            }
        });
        function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            center: myLatLon,
            zoom: 4,
            //disableDefaultUI: true,
        });

        var i= 0;
        $.each(markers, function(i, item) {
              if(typeof item == 'object') {
                  var marker = new google.maps.Marker({
                position: new google.maps.LatLng(parseFloat(item.lat),parseFloat(item.lon)),
                map: map,
                    title: item.titulo,
                    label: item.desc
              });
              marker.setMap(map);

              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                  infowindow.setContent(item.desc);
                  infowindow.open(map, marker);
                }
              })(marker, i));
                  i=i+1;
              }
         });
        }                       
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_SECRET_KEY&callback=initMap" async defer></script>

Answer 1

Markers 变量是一个空数组，导致 AJAX 请求还没有返回。您应该将代码移动到成功回调中或从成功回调中调用它。

尝试类似：

<div id="map" class="height-400"></div>
    <script>
        var map;
        var myLatLon = {lat: -16.398293, lng: -48.965098};
        var markers = [];

        $.ajax({
            dataType:'json',
            url: "contents/map_data.php",
            success: function(data){
                markers = data;
                initMap();
            }
        });
        function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            center: myLatLon,
            zoom: 4,
            //disableDefaultUI: true,
        });

        var i= 0;
        $.each(markers, function(i, item) {
              if(typeof item == 'object') {
                  var marker = new google.maps.Marker({
                position: new google.maps.LatLng(parseFloat(item.lat),parseFloat(item.lon)),
                map: map,
                    title: item.titulo,
                    label: item.desc
              });
              marker.setMap(map);

              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                  infowindow.setContent(item.desc);
                  infowindow.open(map, marker);
                }
              })(marker, i));
                  i=i+1;
              }
         });
        }                       
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_SECRET_KEY&callback=initMap" async defer></script>