用 Fusion Table 中的 infoWindow 替换自动完成 API 标记

Question

背景：

我在 Fusion Tables 中创建了一个代理联系人数据库，并附有几何图形以突出显示他们的领地。我能够在 Google 地图上呈现这些地区，并在单击任何地区时创建信息窗口。决定也使用自动完成功能 API 进行地址搜索，效果很好，因为它会缩放到该位置并放置标记。

问题：

鉴于我能够检索此标记的经度和纬度，我如何才能从不同的列中获取值以添加到我的信息窗口 HTML。

这是我遇到问题的部分代码：

marker.setPosition(place.geometry.location);

var location = place.geometry.location;
var lat = location.lat();
var lng = location.lng();

var layer = new google.maps.FusionTablesLayer({
    query: {
       select: 'geometry, Geographic Name, Agent Name, Agent Website, Agent Phone',
       from: TableId,
       where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ', ' + lng + '),1))'
    }
});

非常感谢任何帮助。

Answer 1

可能最好的方法是使用 Google Visualization API, specifically the DataTable 对象通过空间查询获取 Fusion Table 数据。

这是一个simple sample JSbin。在这里，我展示了一个简单的 FusionTableLayer，用 suppressInfoWindows: true 和 clickable: false 表示加拿大各省（因此该图层仅用于显示目的）。还有一个 Autocomplete 小部件，仅限于加拿大地区。输入地址后，将使用 Geocoder 中的信息创建 Marker。最重要的是，使用半径为 50m 的小圆和 Geocoder 返回的 LatLng 中心作为下拉菜单中的地址，对 Fusion Table 进行了空间查询。 table 查询返回的数据（包含小圆圈的省份的名称和缩写）然后添加到锚定在 Marker 上的 InfoWindow。相关代码：

var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(55.038487,-99.517295),
    zoom: 4
});

var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'),{
    placeIdOnly: true
});
autocomplete.setComponentRestrictions({'country': ['ca']});

var geocoder = new google.maps.Geocoder();

var infoWindow = new google.maps.InfoWindow();

var marker = new google.maps.Marker({
    map: map
});

autocomplete.addListener('place_changed', function(event) {
  infoWindow.close();
  var place = autocomplete.getPlace();
  if (!place.place_id) {
    return;
  }
  geocoder.geocode({'placeId': place.place_id}, function(results, status) {
    if (status !== 'OK') {
      window.alert('Geocoder failed due to: ' + status);
      return;
    }

    marker.setPlace({
        placeId: place.place_id,
        location: results[0].geometry.location
    });
    marker.setVisible(true);
    var content = "<b>Address:</b> " + results[0].formatted_address + "<br>";

    var query = "SELECT 'Place' as place, 'Description'  as description " +
      "FROM 1GK_AefKlsiBzyufbFDuRqvF9RZTdJOUXqnIiCaO9 " +
      "WHERE ST_INTERSECTS(geometry, " +
      "CIRCLE(LATLNG(" + results[0].geometry.location.toUrlValue() + "), 50))";

    var queryText = encodeURIComponent(query);
    var gvizQuery = new google.visualization.Query(
      'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);

    gvizQuery.send(function(response) {
      var table = response.getDataTable();
      content += "<b>Name (Fusion Table):</b> " + table.getValue(0,0) +
        "<br/><b>Desc (Fusion Table):</b> " + table.getValue(0,1);
      infoWindow.setContent(content);
      infoWindow.open(map, marker);
    });
  });
});

用 Fusion Table 中的 infoWindow 替换自动完成 API 标记

Replace Autocomplete API marker with infoWindow from Fusion Table

google-maps

google-fusion-tables

google-places-api