Question

当我将此脚本添加到纯HTML文件的HEAD部分

时

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

我在body onload上运行这个脚本，

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);
}

然后我看到谷歌地图就好了。

然而，在Django模板中同样不起作用。（是的，我是Django的新手:) 我得到了初始化函数中的所有代码，但没有显示地图。页面保持空白。

我认为它与Django和GAE开发服务器有关，以及如何引用Google Maps js API，但我不知道如何修复。

Thanx。

编辑：

我的Django模板看起来像这样（没有Django特定标签或任何东西。）

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    dir="ltr"
    xml:lang="en"
    lang="en">

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/site_media/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/site_media/css/main.css" />

    <script src="/site_media/js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

    <script type="text/javascript">
        $(document).ready(function(event) {
            initialize();
        });

        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>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <center>
        <div id="map_canvas" style="width:60%; height:70%;">Why the heck is the map not showing?</div>
    </center>

  </body>
</html>

从浏览器中呈现该模板的HTML源代码如下：

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    dir="ltr"
    xml:lang="en"
    lang="en">

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="/site_media/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/site_media/css/main.css" />

    <script src="/site_media/js/jquery.min.js" type="text/javascript"></script>

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

    <script type="text/javascript">
        $(document).ready(function(event) {
            initialize();
        });

        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>
    <br/>
    <br/>
    <br/>
    <br/>

    <br/>
    <br/>
    <center>
        <div id="map_canvas" style="width:60%; height:70%;">Why the heck is the map not showing?</div>
    </center>

  </body>
</html>

Answer 1

您的DOCTYPE导致了问题。如果我从您的代码中删除它，则会显示地图。

some threads上有Google Maps JavaScript API v3 Group讨论此问题。

Answer 2

我不认为您的问题（直接）与GAE开发服务器或Django有关 - 看起来您的页面的HTML加载得很好。

我怀疑你的问题可能是jQuery参考。也许jQuery没有被加载，因此你的脚本在尝试访问$(document)时停止执行但由于抛出ReferenceError而失败。

我会检查你加载jQuery库的链接是通过在你的浏览器中手动访问它来工作的（即浏览到http://localhost:8080/site_media/js/jquery.min.js（或者你在哪里运行开发服务器）并确保它有效）。如果没有，请修复您的app.yaml文件，以便正确设置它以提供/site_media/js/jquery.min.js。

Google地图无法在App Engine开发服务器上的Django模板中运行

3 个答案: