Question

我正在关注如何在html页面中使用简单地图的Google tutorial。但是，当我运行代码时，只显示一个灰色方块（我创建的div）。任何人都可以帮助我吗？

以下是我正在使用的代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #map_canvas {
                width: 500px;
                height: 500px;
                background-color: #CCC;
            }
        </style>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script>
            function initialize() {
                var ap_canvas = document.getComputedStyle('map_canvas');
                var mapOptions = { new google.maps.Lating(44.5403, -78.5463),
                    zoom:8,
                    mapTypeld: google.maps.MapTypeId.ROADMAP }
                    var map = new google.maps.Map(map_canvas, mapOptions)
                    }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map_canvas">

        </div>

    </body>
</html>

Answer 1

你有一些拼写错误，例如“var ap_canvas”应该是“var map_canvas”。这个功能有效：

<script>
function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Google Maps API - 地图未显示

1 个答案: