python - Flask 动态谷歌 map 标记(python、postgres、psycopg2)

我正在创建一个 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/