谷歌地图JS API+JSON-多个标记没有显示

Google Maps JS API + JSON - Multiple markers not showing up

本文关键字：显示 JS API+JSON- 谷歌地图      更新时间：2023-09-26

所以，我需要的很简单，我需要在地图中放置标记，我从使用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>

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>
相关文章：