我有一个页面显示了使用googlemapsapi的地图(因此它使用了Flask Google Maps扩展)。我使用以下调用在端点上加载此页面:
return render_template('example.html', mymap=mymap)
mymap是一个用Python编写的googlemaps地图对象,包含用于呈现地图的参数(例如标记等)。我需要让这个页面检查数据库,看看是否添加了任何新的条目(因为这是它获取mymap数据的地方)。有点像
^{pr2}$有人告诉我这不是最好的方法,render\u模板需要与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>
一种可能的解决方案是在单独的烧瓶视图中生成地图内容,并在
iframe
内显示在页面中。您可以让iframe内容定期刷新自己。在下面是一个简单的例子来说明这个解决方案。在
应用程序副本
索引.html
^{pr2}$地图.html
相关问题 更多 >
编程相关推荐