logo标签列表

谷歌地图未显示。

javascriptgoogle-maps
9

我正在按照Google Maps的入门教程跟进，但由于某些原因地图没有出现在我的网页上。相关的HTML/CSS/JS如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>

    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }

    </script>
</head>

<body onload="initialize()">
  <div id="map_canvas" style="width: 400px; height: 400px"></div>
</body>

</html>

地图不会显示在map_canvas div中。

更新

我已经更改了页面，使其不使用JQuery加载地图。现在它使用与教程中完全相同的JS，但是地图仍然不会出现。

1
您无需注册任何内容即可使用Google Maps的JS API。 - Adam Eberlin
@AdamEberlin 你说得对，订阅功能在 v.3 中已被移除。 - Dónal
如果您为div定义了像素大小，地图会显示吗？ - Uri
6个回答
16

你的代码存在三个问题:

(1) 在<script type="text/javascript">function initialize() {之前添加以下行：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>

这是在你的答案中的一段话，但在你的代码中却没有出现http://www.iol.ie/~murtaghd/map/map.htm。

(2) 你需要调用initalize()（同样地：它出现在你的回答中，但不在代码中）：

<body onload="initialize();">

(3) 设置画布大小以显示地图（重申：这在您的帖子中提到，但不在代码中）。之后，您可以根据需要更改大小。

<div id="map_canvas" style="width:500px; height:300px"></div>

你可以在jsfiddle上看到该网站的运行情况。

(1) - 很好地发现了...不包括Google Maps JS文件将防止Google地图显示出来！ - duncan
1
如果未设置大小，地图将不会显示。谢谢。 - Thai Tran
1

经过无数的搜索和大量的帖子（这些帖子过于复杂），我发现只需在内联中添加高度和宽度样式，地图就可以加载。我不能在头部或外部样式表中设置地图元素的高度和宽度--地图将消失。我从当前（？？）谷歌地图API文档中获取了其他所有内容：

就这么简单:

  <div id="mapWrapper" style="height:500px; width:500px;">
    <div id="map" style="height:100%"></div>
  </div>  <!-- end of the mapWrapper  --> 
    <script>
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }

    </script>
0
你的问题是你在使用jQuery语法，但是你没有在页面中引入jQuery库。我收到了JS错误：
Error: l.google.maps.Load is not a function
Source File: http://www.iol.ie/~murtaghd/map/map_files/main.js
Line: 42

Error: $ is not defined
Source File: http://www.iol.ie/~murtaghd/map/map.htm
Line: 24

第二个是致命的。

0

在放置地图的标签上，您不应忘记使用文档类型并加载initialize() JavaScript函数，并且不要忘记在样式表中设置高度和宽度，这样我才能正常工作。如果您没有设置高度和宽度，地图将无法显示。

<!DOCTYPE html>

<body onload="initialize();">
      <div style="height:350px; width:100%;" id="map-canvas"></div>
</body>
-1

你必须使用initialize作为函数名，所以请按照以下方式更改你的代码：

$(function() {

改为：

function initialize() {

<body>

改为：

<body onload="initialize()" >

还有：

});

改为：

}

这样就应该是：

<!DOCTYPE html>
<html>
<head>
    // This causes the common header, footer, styles, JQuery, etc. to be included
    <meta name="layout" content="main"/>

    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
        // Use JQuery to trigger the loading of the Map
        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);
        }

    </script>
</head>

<body onload="initialize()" >
    <div id="map_canvas" style="width:400px; height:400px"></div>
</body>
</html>
你提出的加载函数名称很重要的建议毫无意义。尽管如此，我还是试了一下，但它并没有起作用。 - Dónal
我忘了提醒你，必须将 }); 替换为 }，否则它不是有效的Java代码。 - A.M.K
请按照我说的编辑您上面的示例，并通过http://www.draac.com/javatester.html进行测试，我已经测试了几次，它可以工作。下次在投票之前，请再调查一下。如果Google的JS文件引用initialize会怎么样呢？ - A.M.K
1
我测试了你的建议，但它并没有起作用，我还能做更多的调查吗？说改变一个函数名就会改变行为是毫无意义的。 - Dónal
1
这不是Java，而是JavaScript。 - Dónal
请将以上代码通过我之前提到的测试工具进行测试，谢谢。 - A.M.K
-2

我也遇到了同样的问题。这段代码：

<div id="map_canvas" style="width:500px; height:300px"></div>

..帮了我 - 我将样式宽度/高度添加到标记中，它起作用了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接