在 Python CherryPy 中使用 Google 映射 JQuery

Question

我尝试在 Python 中使用 JQuery 中的 google 地图 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 在第一次加载时被调用，但它似乎没有加载地图。 google 地图可以在 CherryPy 中以这种方式使用，还是我必须为 Python 使用正确的 google 地图 api？

谢谢。

Answer 1

嗯..对我有用。格式功能可能有问题。（然后你 # 它让它工作或者......你忘了取消它？）

我试过你的代码，它似乎工作正常。我将格式修改为 ...""".format(javascript, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)，地图显示出来了。

其他修复方法包括使用 %s，或添加内联字符串，如：

"""...<script>"""+javascript+"""</script>..."""

如果所有这些都不能解决您的问题，包含您收到的错误消息会很有帮助。

希望对您有所帮助

在 Python CherryPy 中使用 Google 映射 JQuery

Using Google Maps JQuery in Python CherryPy

html

python

jquery

google-maps

cherrypy