0
Я пробовал использовать API карт Google в JQuery в моем Python. Код, который у меня есть, работает, когда помещается в отдельный файл, и запускается как HTML-страница, но когда я совмещаю его с моим Python в HTML с помощью CherryPy, карта не отображается, но, проверяя элемент на веб-странице, контур где он должен быть показан, но без карты в нем.Использование Google Maps JQuery в Python CherryPy
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 вызывается, когда он загружается в первый раз, но, похоже, он не загружает карту. Можно ли использовать карты Google таким образом внутри CherryPy или мне нужно использовать правильные карты goi для api для Python?
Спасибо.
Вы проверили вашу консоль JS на наличие каких-либо ошибок или предупреждений? Вы сравнили источник созданной страницы, обслуживаемой CherryPy, с точным ожидаемым источником? С JS это может стать сложным, один пропущенный '' 'вас отбросит. –
Проверено все скобки и все – Navvy