根据用户当前的地图视图显示 Google 地图标记

Question

在我的网络应用程序中，我使用 psycopg2 来查询包含数千个位置点的 postgreSQL 数据库。假设它们可以分为办公室和学校。

大约有 5500 个办公室和 550 所学校。一次获取所有结果会使其过载并导致我的查询被取消。因此，我只想根据用户当前正在查看的地图部分显示大约 100 个结果。

我的地图的默认视图是美国。我希望数据库在任何给定时间都只能获得 100 个结果（100 个办公室和 100 所学校）。如果用户放大，它会更详细——会出现不同的标记。

这是我目前所拥有的：

@app.route('/_ajax', methods= ['GET'])
def points():
    myConnection = psycopg2.connect(host=hostname, user=username,
    password=password, dbname=database)
    cur = myConnection.cursor()

    bounds = request.args.get('bounds')

    officeID = []
    office_info = []
    cur.execute("""SELECT DISTINCT(o.office_id) from db_office o
                   WHERE o.location && ST_MakeEnvelope(left, bottom, right, top, 4326)
                   GROUP BY o.office_id LIMIT 100""")
    for row in cur:
        officeID.append(row[0])
    for o in officeID:
    cur.execute("""SELECT ST_Y(o.location::geometry), 
                   ST_X(o.location::geometry),
                   o.owner, o.office_name from db_office o""".format(o))
    for row in cur:
        office_info.append([row[0], row[1], row[2], row[3]])
    offices = dict(zip(officeID, office_info))

    schoolID = []
    school_info = []
    cur.execute("""SELECT DISTINCT(s.school_id) from db_school s
                    WHERE s.location && ST_MakeEnvelope(left, bottom, right, top, 4326)
                   GROUP BY s.school_id LIMIT 100""")
    for row in cur:
        schoolID.append(row[0])
    for s in schoolID:
        cur.execute("""SELECT ST_Y(s.location::geometry), 
                       ST_X(s.location::geometry),
                       s.owner, s.school_name from db_school s""".format(s))
    for row in cur:
        school_info.append([row[0], row[1], row[2], row[3]])
    schools = dict(zip(schoolID, school_info))

return jsonify(offices=offices, schools=schools)

绘制标记的 AJAX 调用如下所示：

 $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
 $(function() {
    $.getJSON($SCRIPT_ROOT + '/_ajax?bounds=' + map.getBounds().toUrlValue(),
    function(data) {

    var places = [];
    var marker;

    Object.keys(data.offices).forEach(function(key) {
        var offices = data.offices[key];
        places.push(new google.maps.LatLng(offices[0], offices[1]))
        marker = new google.maps.Marker({
            position: {lat: offices[0], lng: offices[1]},
            map: map
        });
    });

    Object.keys(data.schools).forEach(function(key) {
       var schools = data.schools[key];
       places.push(new google.maps.LatLng(schools[0], schools[1]))
       marker = new google.maps.Marker({
           position: {lat: schools[0], lng: schools[1]},
           map: map,
       });
    });
});

总而言之，这段代码获取了 100 个办公室和 100 个学校，并将其放入字典中，其中 id 是键，值是纬度和经度等信息。

这有效，每个结果显示 100 个，但不依赖于用户位置。如何根据用户的地图视图更改数据库获取的结果？

Answer 1

您需要首先按照here 的说明获取 Google 地图的边界。

然后使用边界在 Postgres 中执行相交查询，如 here 所述。

SELECT DISTINCT(o.office_id) from db_office o
WHERE o.location && ST_MakeEnvelope(left, bottom, right, top, 4326);
GROUP BY o.office_id LIMIT 100

来自 javascript 的 Ajax 调用：

$.getJSON($SCRIPT_ROOT + '/_ajax?bounds=' + map.getBounds().toUrlValue(), function (response) { 
    //do something with response here
});