我正在创建一个 Flask 应用程序,它使用 psycopg2 从 postgresql 数据库中提取数据。对于每一行的用户,数据库都有纬度和经度信息。我想使用带有此纬度/经度信息的标记将事件用户动态绘制到我的 map 上。
现在,我可以使用 app.py 中的以下内容返回事件用户的坐标:
def getUserLocation(conn, cur):
cur.execute("""SELECT latitude, longitude FROM user_list WHERE timestamps >
(current_timestamp - make_interval(mins := %s))""", [setTime])
for latitude, longitude in cur.fetchall():
return latitude, longitude
然后这个返回值被保存为 位置 。
myConnection = psycopg2.connect(host=hostname, user=username,
password=password, dbname=database)
cur = myConnection.cursor()
locations = getUserLocation (myConnection, cur)
然后它像这样呈现给 Jinja:
@app.route("/")
def mapview():
return render_template('index.html', locations=locations)
这就是我的添加标记函数现在的样子,我尝试调用这些值,但它不起作用。
function addMarkers() {
{% for location in locations %}
var point = {lat: {{ location.lat }}, lng: {{ location.lng }}};
var marker = new google.maps.Marker({
position: point,
map: map,
});
{% endfor %}
}
如何在 map 上动态渲染这些点?
最佳答案
只需传递纬度和经度,并像这样在客户端处理点:
<div id="map" style="width: 100%; height: 400px"></div>
<script>
$(document).ready(function(){
function initMap() {
var latlng = { lat: 37.09024, lng: -95.712891 }; // THIS IS CENTER OF THE MAP
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: latlng,
scrollwheel: false,
disableDoubleClickZoom: true,
});
google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
function addMarkers() {
var point = { lat: {{ locations.latitude }}, lng: {{ locations.longitude }} };
var marker = new google.maps.Marker({
position: point,
map: map,
title: '!',
url: '',
});
marker['infowindow'] = new google.maps.InfoWindow({
content: '<div id="content" style="text-align: center">{{ point.info }}</div>'
}); // info of the point
google.maps.event.addListener(marker, 'click', function() {
//window.location.href = this.url;
this['infowindow'].open(map, this);
});
google.maps.event.addListener(marker, 'mouseover', function() {
//this['infowindow'].open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
//this['infowindow'].close(map, this);
});
}
}
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=YOUR_CODE&callback=initMap" async defer></script>
关于python - Flask 动态谷歌 map 标记(python、postgres、psycopg2),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44635429/