使用render_template刷新页面？

Question

我有一个使用Google Maps API显示地图的页面（因此它使用Flask Google Maps扩展程序）。我使用以下调用在我的端点上加载此页面：

return render_template('example.html', mymap=mymap)

mymap是一个用Python编写的Google Maps地图对象，其中包含用于渲染地图的参数（例如标记等）。我需要让这个页面检查数据库以查看是否添加了任何新条目（因为这是从mymap获取数据的地方）。像

这样的东西

while True:
     # Wait some time
     # Check database and add to markers list any new entries
     # Render template with new markers
     render_template('example.html', mymap=mymap)

我被告知这不是最好的方法，并且render_template需要与return语句一起使用。最好的办法是什么？目前，这是html文件，其中来自mymap的内容（用于呈现页面）：

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

<style type="text/css">
      #{{gmap.identifier}} { {{gmap.style}} }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
<script type="text/javascript">
    function initialize_googleMap() {
        var googleMap = new google.maps.Map(
        document.getElementById('{{gmap.identifier}}'), {
            center: new google.maps.LatLng({{gmap.center.0}}, {{gmap.center.1}}),
            zoom: {{gmap.zoom}},
            mapTypeId: google.maps.MapTypeId.{{gmap.maptype}}
        });

    var infoWindow = new google.maps.InfoWindow({
        content: "loading..."
    });


        {% for marker in gmap.markers %}

            var marker_{{loop.counter}} = new google.maps.Marker({
                position: new google.maps.LatLng({{marker.0}}, {{marker.1}}),
                map: googleMap,
                title: '{{marker.2}}',
                icon: '{{marker.3}}',
            });


            google.maps.event.addListener(marker_{{loop.counter}}, 'click', function() {
                infoWindow.setContent("{{marker.4|safe}}");
                infoWindow.open(googleMap, this);
            });
            google.maps.event.addListener(marker_{{loop.counter}}, 'rightclick', function() {

                $(this).w2overlay('Hello');
            });
        {% endfor %}

        {% for polyline in gmap.polylines %}
            var polylineCoordinates = [];

            {% for point in polyline.coordinates %}
                polylineCoordinates.push(new google.maps.LatLng({{point.0}}, {{point.1}}))
            {% endfor %}

            var polylinePath = new google.maps.Polyline({
                path: polylineCoordinates,
                geodesic: true,
                strokeColor: '{{polyline.stroke_color}}',
                strokeOpacity: '{{polyline.stroke_opacity}}',
                strokeWeight: '{{polyline.stroke_weight}}'
            });

            polylinePath.setMap(googleMap);
        {% endfor %}

        {% for polygon in gmap.polygons %}
            var polygonCoordinates = [];

            {% for point in polygon.coordinates %}
                polygonCoordinates.push(new google.maps.LatLng({{point.0}}, {{point.1}}))
            {% endfor %}

            var polygonPath = new google.maps.Polygon({
                path: polygonCoordinates,
                strokeColor: '{{polygon.stroke_color}}',
                strokeOpacity: '{{polygon.stroke_opacity}}',
                strokeWeight: '{{polygon.stroke_weight}}',
                fillColor: '{{polygon.fill_color}}',
                fillOpacity: '{{polygon.fill_opacity}}'
            });

            polygonPath.setMap(googleMap);
        {% endfor %}

        {% for circle in gmap.circles %}
            var circleCenter = new google.maps.LatLng({{circle.center.0}}, {{circle.center.1}});

            var gCircle = new google.maps.Circle({
                strokeColor: '{{circle.stroke_color}}',
                strokeOpacity: '{{circle.stroke_opacity}}',
                strokeWeight: '{{circle.stroke_weight}}',
                fillColor: '{{circle.fill_color}}',
                fillOpacity: '{{circle.fill_opacity}}',
                center: circleCenter,
                radius: {{circle.radius}}
            });

            gCircle.setMap(googleMap);
        {% endfor %}

        {% for rectangle in gmap.rectangles %}
            var gRectangle = new google.maps.Rectangle({
                strokeColor: '{{rectangle.stroke_color}}',
                strokeOpacity: '{{rectangle.stroke_opacity}}',
                strokeWeight: '{{rectangle.stroke_weight}}',
                fillColor: '{{rectangle.fill_color}}',
                fillOpacity: '{{rectangle.fill_opacity}}',
                bounds: new google.maps.LatLngBounds(
                    new google.maps.LatLng({{rectangle.bounds.0.0}}, {{rectangle.bounds.0.1}}),
                    new google.maps.LatLng({{rectangle.bounds.1.0}}, {{rectangle.bounds.1.1}}))
                });

            gRectangle.setMap(googleMap);
        {% endfor %}

        if('{{gmap.drawing}}' == "True") {
            var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
              position: google.maps.ControlPosition.TOP_CENTER,
              drawingModes: [
                google.maps.drawing.OverlayType.MARKER,
                google.maps.drawing.OverlayType.CIRCLE,
                google.maps.drawing.OverlayType.POLYGON,
                google.maps.drawing.OverlayType.POLYLINE,
                google.maps.drawing.OverlayType.RECTANGLE
              ]
            },
            circleOptions: {
              fillColor: '#ffff00',
              fillOpacity: 1,
              strokeWeight: 5,
              clickable: false,
              editable: true,
              zIndex: 1
            }
          });
          drawingManager.setMap(googleMap);
        }

        if (navigator.geolocation) {
            var container = document.createElement('div');
            var homeControl = new BuildHomeControl(container);

            container.index = 1;
            googleMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(container);

            google.maps.event.addDomListener(container, 'click', function() {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var coordinates = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    googleMap.setCenter(coordinates);
                });
            });
        }
    }

    function BuildHomeControl(container) {
          container.style.padding = '2px';

          var img = document.createElement('img');
          img.title = 'Click to set the map to Home';
          container.appendChild(img);
          img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB8klEQVR4Xu3XPWgTYRgA4Lug9QetFm1RqL8d0uIfSJwcOiiog4oi/oB0FAQRFxE6ODg6agehUMQiok62IO2iVmnXoIvNJEglSkstBYnWNOczHhnSpBfoYF54eLn7+N7vve+4uySMoihYyUjxfzfQaKDRwCpqjjAMm6U0W1gkT84j/bfmWibVsvBO6Qbn6YgNLfCJJwyo+avut8DiZ6VxbtPBHAUWKJLhAaMa7axrAwqekZ7RzmeucZAJPnKYXvIcZcicvVV1YLsqErvJEzFEa2zsOa9jx51kiRihaYn6Ve3ATbaRpcek6djYdXpiFzMpXeYHJziV6BbYxhbpAhH3LDBXtnuzzJSdy0l9BFxN1ACd7OALo1QbL/nDERexIUkDbQS0MKzYK1or7Fg7Yw6ekqKZTUkaKBGwnn2kWc1SEcVyKUkDU5T4xiEyfK/wRE3R7eAiRab5meRVPEmONPsVfxNUF6dZx3tzfi97B0wuSAOkuOv+rim759tDys9JtyjyuB5vwn6ydNNngbWxsRcgMNYmDbKHfhcwUZePkcIHpGF2McZ9xnlHyHFO0ksXI1xSez5pA/EmuqSHHCPgK1tJMU8bAY+4E1u8rp/jJukcV8iwkRIzvGVQvQ81/x5I8KNkM4vMqlNYVp3GHxNWNBoNNBr4B2Hh6BuKnV6nAAAAAElFTkSuQmCC';
    }

    google.maps.event.addDomListener(window, 'load', initialize_googleMap);
</script>

Answer 1

一种可能的解决方案是在单独的Flask视图中生成地图内容，并在iframe内的页面中显示此内容。您可以定期刷新iframe内容。

这是一个说明此解决方案的简单示例。

<强> app.py

# coding: utf-8

from flask import Flask, render_template
from flask.ext.googlemaps import GoogleMaps
from flask.ext.googlemaps import Map
import random

app = Flask(__name__, template_folder=".")
GoogleMaps(app)

@app.route("/")
def index():
    return render_template('index.html')

@app.route("/map")
def map():

    lat = -31.9572891
    long = 115.8559911

    points = [
        {"lat": -31.958988, "long": 115.858176},
        {"lat": -31.954946, "long": 115.866976},
        {"lat": -31.952037, "long": 115.851682},
        {"lat": -31.951573, "long": 115.858570}
    ]

    [a,b] = random.sample(range(0,3),2)

    mymap = Map(
        identifier="mymap",
        lat=lat,
        lng=long,
        markers={'http://maps.google.com/mapfiles/ms/icons/green-dot.png':[(points[a]['lat'], points[a]['long'])],
                 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png':[(points[b]['lat'], points[b]['long'])]}
    )
    return render_template('map.html', mymap=mymap)

if __name__ == "__main__":
    app.run(debug=True)

<强>的index.html

<!DOCTYPE html>
    <html>
    <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>Flask Google Maps Example</title>
    </head>
    <body>
        <h1>Flask Google Maps</h1>

        <iframe src="{{ url_for('map') }}" frameborder="0" width="600" height="600"></iframe>

    </body>
</html>

<强> map.html

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="refresh" content="5">
        <title>Flask Google Maps Example</title>
        {{mymap.js}}
    </head>
    <body>
        {{mymap.html}}
    </body>
</html>