Question

这是我第一次使用API，并且过去我搜索过所有给予相同问题的人的所有其他选项。我只是简单地得到一个空白页，控制台也没有显示任何错误。这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    
    <style>
      #map {
        height: 100px;
        width: 100px;
      }
      html, body {
        height: 100px;
        width: 100px;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  
  <body>
    <div id="map" style="width:100px; height:100px"></div>
    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async defer></script>
    
    <script>
        var mLocations = null;
                
        function initMap() {
            var lLocations
            var marker, i;
            var infowindow = new google.maps.InfoWindow({});
        
            $.getJSON("", function(pLocations) {
                mLocations = pLocations;
                
                for (i = 0; i < pLocations.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(pLocations[i].lat, pLocations[i].lon),
                        map: map
                    });
                    
                    google.maps.event.addListener(marker, 'Click', (function (marker, i) {
                        return function () {
                            infowindow.setContent(mLocations[i].info);
                            infowindow.open(map, marker);
                        }
                    }) (marker, i));
                };
        
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 20,
                    center: new google.maps.LatLng(lLocations[1].lat, lLocations[1].lon),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
            });
        }
    </script>
  </body>
</html>

在此方面的任何帮助将不胜感激，因为到目前为止我还没有想法。

Answer 1

我在这里至少看到几个问题：

在初始化之前，您正在for循环中使用map变量。我将在getJSON回调之外初始化地图；
您没有设置居中选项；
如果$ .getJSON不成功，您可能看不到地图-使用console.log或断点来查看是否正在评估您期望的所有行；
您不导入jQuery以使用$ .getJSON

尝试此更新的initMap函数：

function initMap() {
    var marker, i;

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: new google.maps.LatLng(0, 0);
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow({});

    $.ajax({
        url: "polarServer.asp?Screen=GetBlobScript&Script=LocationMap_GetMapData&SID=<%Context.WebSession.SessionIDcode%>",
        dataType: 'json',
        success: function(pLocations) {
            if (pLocations instanceof Array) {
                for (i = 0; i < pLocations.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(pLocations[i].lat, pLocations[i].lon),
                        map: map
                    });

                    google.maps.event.addListener(marker, 'Click', function () {
                        infowindow.setContent(pLocations[i].info);
                        infowindow.open(map, marker);
                    });
                }

                if (pLocations.length > 0) {
                    map.setCenter(new google.maps.LatLng(pLocations[0].lat, pLocations[0].lon));
                }
            } else {
                console.error("serve response is not an Array");
            }
        },
        error: function(err){
            console.error("Failed to get the data: ", err);
        }
    });
}

并确保将jQuery嵌入代码中

Answer 2

我使用模拟位置在地图上显示图钉。只需用您的API call替换模拟位置即可。

请尝试以下代码段。

var mLocations = null;

function initMap() {
  var lLocations
  var marker, i;
  var infowindow = new google.maps.InfoWindow({});

  var pLocations = [{
      lat: -25.363,
      lon: 131.044
    },
    {
      lat: -25.34470,
      lon: 131.05121
    },
    {
      lat: -25.33259,
      lon: 131.02615
    },
    {
      lat: -25.34501,
      lon: 131.01001
    }
  ];


  //  $.getJSON("polarServer.asp?Screen=GetBlobScript&Script=LocationMap_GetMapData&SID=<%Context.WebSession.SessionIDcode%>", function(pLocations) {
  mLocations = pLocations;

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: new google.maps.LatLng(pLocations[1].lat, pLocations[1].lon),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  for (i = 0; i < pLocations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(pLocations[i].lat, pLocations[i].lon),
      map: map
    });

    google.maps.event.addListener(marker, 'Click', (function(marker, i) {
      return function() {
        infowindow.setContent(pLocations[i].info);
        infowindow.open(map, marker);
      }
    })(marker, i));
  };


  //});
}

html, body {
        height: 100%;
 }
      
#map {
        height: 550px;
        width: 100%;
 }

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD0lvijQDmjbI8uHMbF8M0pYuaA84HBCsc&callback=initMap" async defer></script>
  </head>
  
  <body>
    <div id="map"></div>
        
  </body>
</html>

Google Maps JS API未显示-没有错误

2 个答案: