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

时间:2017-07-27 19:15:29

标签: javascript ajax google-maps postgis psycopg2

在我的网络应用程序中,我使用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个结果,但不依赖于用户位置。如何根据用户的地图视图更改数据库获取的结果?

1 个答案:

答案 0 :(得分:0)

您需要先按照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
});
相关问题