Google Maps API v3&融合层:获取行数据

时间:2014-11-14 18:08:56

标签: javascript google-maps google-maps-api-3 google-fusion-tables

我正在尝试在地图上放置标记时使用几何图形从Google地图中的融合表图层获取行ID。这是我第一次尝试使用融合层,尽管阅读了文档并花了数小时测试我现在感到难过。

如果用户点击地图我可以得到行[“id”]没有问题,但是如果我使用任何其他方法(例如autocomplete.getPlace)以编程方式放置标记我无法从FusionLayer获取行ID这就是我所需要的。我的代码如下:

/* get row id if user clicks on the map */
google.maps.event.addListener(fusionLayer, "click", function(e) {
    document.getElementById("MY_HIDDEN_FIELD").value = e.row["id"].value;
    placeMarker(e.latLng, map);
});

function placeMarker(position, map) {
    addMarker(map,true,position);
    map.panTo(position);
    document.getElementById("latitude").value = position.lat();
    document.getElementById("longitude").value = position.lng();
}

function addMarker(map,draggable,position){
    deleteMarkers();
    if (infowindow) {
        infowindow.close();
    }
    draggable = typeof draggable !== "undefined" ? draggable : true;
    var icon = document.getElementById("map-icon").value;
    var marker = new google.maps.Marker({
        map: map,
        draggable: true,
        position: position,
        icon: icon
    });
    arr_markers.push(marker);
}

我一直在努力解决这个问题。我已经尝试在bounds_changed和center_changed上的fusionLayer上放置监听器,如下所示,但这不起作用,因为e未定义:

google.maps.event.addListener(fusionLayer, "center_changed", function(e) {
    document.getElementById("MY_HIDDEN_FIELD").value = e.row["id"].value;
    placeMarker(e.latLng, map);
});

任何人都可以帮我指出正确的方向吗?

非常感谢

2 个答案:

答案 0 :(得分:3)

我认为你实际上不能在fusionTables层上进行编程查询。相反,您使用包装器让google maps API为您查询fusionTable本身,并在地图上呈现结果。

您要实现的目标不应该依赖于渲染的fusionTablesLayer对象,而是直接查询fusion table API。 Derek Eder的Fusiontables Map Template使用了如下函数:

   // replace with your table ID
   var fusionTableId = "1FQeX0LbhOo7M6NH19xwHGB6sozCsL1GK4sngqiTy";     

   //*You need an API key. found at https://code.google.com/apis/console/
   var googleApiKey =  "[YOUR API KEY]";

   var queryStr = [];
   queryStr.push("SELECT * ");
   queryStr.push(" FROM " + fusionTableId);

   // replace with your geo field or fields accordingly, coordinates and tolerance radius
   // queryStr.push(" WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(37.4, -122.1), 500))");

   var sql = encodeURIComponent(queryStr.join(" "));
   $.ajax({
      url: "https://www.googleapis.com/fusiontables/v1/query?sql="+sql+"&key="+googleApiKey,
      dataType: "json"
   }).done(function (response) {
      console.log(response);
   });

免责声明:我是Derek项目的谦逊贡献者。

注意事项

  • 您需要一个API密钥,但它是免费的,值得付出努力。
  • 您需要优化该queryStr以实际确定您想要的位置。
  • 即使在要求精确的坐标对时,您也可能会获得多个匹配的行,或者没有。
  • 我正在使用jQuery,因为我需要ajax方法,但那部分取决于你。
  • 查询表只是为了得到row_id可能有点过分,但毕竟这是一个便宜的请求。

答案 1 :(得分:0)

为了完整性,我放弃了融合层,因为它并不是真正需要的,并且解决方案,得益于amenadiel的帮助,现在看起来像这样:

/* get row id if user clicks on the map */
google.maps.event.addListener(map, "click", function(e) {
    placeMarker(e.latLng, map);
});

function getROWID(lat,lng){
    var queryStr = [];
    queryStr.push("SELECT id ");
    queryStr.push(" FROM " + fusionTableId);
    // set coordinates and tolerance radius
    queryStr.push(" WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG("+lat+", "+lng+"), 1))");

    var sql = encodeURIComponent(queryStr.join(" "));
    $.ajax({
        url: "https://www.googleapis.com/fusiontables/v2/query?sql="+sql+"&key="+googleApiKey,
        dataType: "json"
    }).done(function (response) {
        document.getElementById("MY_HIDDEN_FIELD").value = response.rows[0][0];
    });
}

function placeMarker(position, map) {
    addMarker(map,true,position);
    map.panTo(position);
    document.getElementById("latlon").value = position;
    document.getElementById("latitude").value = position.lat();
    document.getElementById("longitude").value = position.lng();
    getROWID(position.lat(),position.lng());
}

function addMarker(map,draggable,position){
    deleteMarkers();
    if (infowindow) {
        infowindow.close();
    }
    draggable = typeof draggable !== "undefined" ? draggable : true;
    var icon = document.getElementById("map-icon").value;
    var marker = new google.maps.Marker({
        map: map,
        draggable: true,
        position: position,
        icon: icon
    });
    arr_markers.push(marker);
}