时间戳

首页 > 解决方案 > Google Maps JS API 未显示 - 无错误

javascript - Google Maps JS API 未显示 - 无错误

问题描述

这是我第一次使用 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>

对此的任何帮助将不胜感激，因为我现在没有想法。

标签： javascriptapigoogle-maps

解决方案

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

  1. 您在map初始化之前在 for 循环中使用该变量。我会在 getJSON 回调之外初始化地图；
  2. 您没有设置中心选项；
  3. 如果 $.getJSON 不成功，您可能看不到地图 - 使用console.log或断点来查看是否正在评估您期望的所有行；
  4. 你不导入 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

推荐阅读