javascript - 根据用户当前的 map View 显示 Google map 标记

Question

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

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

我的 map 的默认 View 是美国。我希望数据库在任何给定时间仅获得 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 个学校并将其放入字典中，其中 ids 是键，值是纬度和经度等信息。

这可以工作并显示 100 个结果，但不依赖于用户位置。如何根据用户的 map View 更改数据库获取的结果？

Answer 1

您需要首先获取 Google map 的边界，如 here 中所述。 .

然后使用边界在 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
});