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

Question

在我的Web应用程序中，我正在使用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

您需要首先获取Google地图的边界，如此处所述。

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

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
});