Question

我的网站上的谷歌地图没有加载有问题，但除了白色背景外，容器中还有一些东西，实际上我可以看到右下方的条款和右上角的卫星按钮。

有代码，我希望你能发现错误：

function initialize() {
        var myLatLng = new google.maps.LatLng(49.724305, 4.716567);
        var mapOptions = {
          center: myLatLng,
          zoom: 17,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(mapCanvas, mapOptions);

        var image = {
            url: '/media/A.png',
            size: new google.maps.Size(56, 67),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(32, 67),
            scaledSize: new google.maps.Size(56, 67)
        };

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize());

Answer 1

在你的代码mapCanvas似乎是未分配的。添加var mapCanvas = document.getElementById('map');之类的内容后，地图会按预期加载。 JSFiddle

Answer 2

搞定了。

我已添加了googleapis链接＆＃34; https://maps.googleapis.com/maps/api/js?sensor=false＆＃34;＆gt;。

我已将var map = new google.maps.Map(mapCanvas, mapOptions);更改为var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

我已经删除了地图事件监听器中的空括号。

<!DOCTYPE html>
<html>
<head>
   <style>
       #map-canvas {
           width: 600px;
           height: 600px;
       }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
        function initialize() {
    var myLatLng = new google.maps.LatLng(49.724305, 4.716567);
    var mapOptions = {
      center: myLatLng,
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    var image = {
        url: '/media/A.png',
        size: new google.maps.Size(56, 67),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(32, 67),
        scaledSize: new google.maps.Size(56, 67)
    };

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-canvas"></div>
</body>

Google Map API似乎无法加载

2 个答案: