Google Maps API v3和fusion图层：获取行数据

Posted 2021-04-02

我正在尝试在地图上放置标记时使用几何图形从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);
}

我一直在搞乱几个小时试图解决这个问题。我已经尝试在fusionLayer上将听众放在bounds_changed和center_changed上，如下所示，但这不起作用，因为e未定义：

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

谁能帮助我指出正确的方向？

非常感谢

答案

我认为你实际上不能在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可能有点过分，但毕竟这是一个便宜的请求。

另一答案

为了完整性，我放弃了融合层，因为它并不是真正需要的，并且解决方案，得益于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);
}