谷歌地图在 App Engine 开发服务器上的 Django 模板中不起作用
Posted
技术标签:
【中文标题】谷歌地图在 App Engine 开发服务器上的 Django 模板中不起作用【英文标题】：Google Maps not working in Django template on App Engine development server 【发布时间】：2011-03-08 10:49:10 【问题描述】：当我将此脚本添加到纯 html 文件的 HEAD 部分时
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
我在正文 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 有关，但我不知道如何修复。
非常感谢。
编辑：
我的 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>
【问题讨论】：
你的 Django 模板是什么样的？检索页面时该页面的来源是什么？ @David Underhill：我在上面添加了我的模板。你的意思是呈现的 HTML 源代码在浏览器中是什么样子的？ 【参考方案1】：您的DOCTYPE 导致了问题。如果我从您的代码中删除它，则会显示地图。
Google Maps JavaScript API v3 Group 上有some threads 讨论这个问题。
【讨论】：
谢谢。自从我发布它以来，我一直没有时间看这个，但它一直在困扰我的大脑。它完美地工作。现在我可以继续了。感谢您花时间解决这个问题！【参考方案2】：我认为我已经解决了这个问题，我只是通过谷歌自己的方法初始化谷歌地图来修复它：
google.setOnLoadCallback(初始化);
我知道我尝试在 jQuery 就绪时执行此操作（默认情况下），但由于某种原因没有奏效。
【讨论】：
感谢您的提示。我认为虽然 cope360 的答案触及了问题的根源，所以我将他的答案标记为正确答案。【参考方案3】：我不认为您的问题（直接）与 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。
【讨论】：
感谢您的提示，但不是这样。我确实验证了我的 jQuery 工作并且我的脚本正在执行。以上是关于谷歌地图在 App Engine 开发服务器上的 Django 模板中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Google Apps 域上的 Google App Engine