【发布时间】：2015-05-27 00:34:27
【问题描述】：
我尝试在我的 Python 中使用 JQuery 中的谷歌地图 API。我拥有的代码在放入单独的文件时工作，并作为 HTML 页面运行，但是当我使用 CherryPy 将它与我的 Python 结合到 HTML 时，地图不显示，但通过检查网页中的元素，大纲它应该在哪里显示，但其中没有地图。
javascript = """
$('document').ready(init);
function init(){
var mapOpt = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOpt);
$('.bar-percentage[data-percentage]').each(function () {
var progress = $(this);
var percentage = Math.ceil($(this).attr('data-percentage'));
$({countNum: 0}).animate({countNum: percentage}, {
duration: 2000,
easing:'linear',
step: function() {
// What todo on every count
var pct = '';
if(percentage == 0){
pct = Math.floor(this.countNum) + '%';
}else{
pct = Math.floor(this.countNum+1) + '%';
}
progress.text(pct) && progress.siblings().children().css('width',pct);
}
});
});
}
google.maps.event.addDomListener(window, 'load', init);
"""
return """<html>
<head>
<title>Fitbit</title>
<link href="/static/css/fitbit.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>{0}</script>
</head>
<body>
<header>
<img id="title" src="/static/images/fitbit.png" alt="FITBIT">
</header>
<nav>
<ul>
<li><a href="#">User Info</a></li>
<li><a href="#">Show All</a></li>
<li><a href="#">Steps</a></li>
<li><a href="#">Calories</a></li>
<li><a href="#">Distance</a></li>
<li><a href="#">Active Minutes</a></li>
<li><a href="#">Floors</a></li>
<li><a href="#">Sleep</a></li>
<li><a href="#">Activities</a></li>
</ul>
</nav>
<section id="dateBar">
<section id="back">
<a href="#"><img alt="backDate" src="/static/images/navArrowL.png" width="40" height="40"/></a>
</section>
<time id="date">
<h4>{1}</h4>
</time>
<section id="forward">
<a href="#"><img alt="forwardDate" src="/static/images/navArrow.png" width="40" height="40"/></a>
</section>
</section>
<article id="allInfo">
<article id="dailyInfo">
<article class="infoWindow">
<article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Steps</article>
<article class="total">{2}</article>
<div id="bar-1" class="bar-main-container azure">
<div class="wrap">
<div class="bar-percentage" data-percentage="{3}"></div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
</article>
<article class="infoWindow">
<article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Calories</article>
<article class="total">{4}</article>
<div id="bar-2" class="bar-main-container emerald">
<div class="wrap">
<div class="bar-percentage" data-percentage="{8}"></div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
</article>
<article class="infoWindow">
<article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Distance</article>
<article class="total">{5}</article>
<div id="bar-3" class="bar-main-container violet">
<div class="wrap">
<div class="bar-percentage" data-percentage="{9}"></div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
</article>
<article class="infoWindow">
<article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Active Minutes</article>
<article class="total">{6}</article>
<div id="bar-4" class="bar-main-container yellow">
<div class="wrap">
<div class="bar-percentage" data-percentage="{10}"></div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
</article>
<article class="infoWindow">
<article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Floors</article>
<article class="total">{7}</article>
<div id="bar-5" class="bar-main-container red">
<div class="wrap">
<div class="bar-percentage" data-percentage="{11}"></div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
</article>
<article class="infoWindow">
<article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Sleep</article>
<article class="total">Current</article>
<div id="bar-5" class="bar-main-container red">
<div class="wrap">
<div class="bar-percentage" data-percentage="33"></div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
</article>
<article class="infoWindow">
<article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Activity</article>
<article class="total">Currnt</article>
<div id="bar-5" class="bar-main-container red">
<div class="wrap">
<div class="bar-percentage" data-percentage="33"></div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
</article>
</article>
<article id="userInfo">
</article>
<section id="allActivities">
<div id="googleMap" style="width:500px;height:380px;"></div>
</section>
</article>
</body>
</html>""" #.format(javascript, currentDate, todaySteps, stepsPerc, todayCalories, todayDistance, todayActive, todayFloors, caloriesPerc, distancePerc, activeMinsPerc, floorsPerc)
JQuery 在第一次加载时被调用，但它似乎没有加载地图。谷歌地图可以在 CherryPy 中以这种方式使用，还是我必须为 Python 使用正确的谷歌地图 API？
谢谢。
【问题讨论】：
-
您检查过您的 JS 控制台是否有任何错误或警告？您是否将 CherryPy 提供的生成页面的来源与确切的预期来源进行了比较？使用 JS 可能会变得很棘手，缺少一个
}会让你失望。 -
检查了所有括号和所有内容
标签： jquery python html google-maps cherrypy