【发布时间】：2015-11-13 21:35:15
【问题描述】：
我有一个使用 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 语句一起使用。最好的方法是什么？目前，这是来自 mymap 的内容所在的 html 文件（用于渲染页面）：
<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>
【问题讨论】：
-
您可以编写一个额外的视图函数，该函数仅返回您网站的地图部分，并使用 js/jquery 从前端调用它。对渲染模板的调用将需要刷新整个页面。
-
@Maarten，我该怎么做？
-
强制页面每隔几分钟重新加载一次（在 html 中）？或使用 ajax 见stackoverflow.com/questions/8470431/…
标签： javascript python google-maps flask