一切就绪!

着手开发前,请先阅读我们的开发者文档

激活 Google Maps JavaScript API

为帮助您起步,我们将引导您在 Google Developers Console 中先完成几项任务:

  1. 创建或选择项目
  2. 激活 Google Maps JavaScript API 及相关服务
  3. 创建相应密钥
继续

Fusion Tables 图层(试验性)

  1. 概览
  2. 限制
  3. Fusion Table 设置
  4. 构建 FusionTables 图层
  5. Fusion Table 查询
  6. Fusion Table 样式
  7. Fusion Table 热图

注:Fusion Tables 图层是试验性的。

Fusion Tables 图层用于呈现 Google Fusion Tables 中包含的数据。

概览

Google Maps JavaScript API 允许您使用 FusionTablesLayer 对象将 Google Fusion Tables 中包含的数据呈现为地图上的图层。Google Fusion Table 是一种数据库表格,其中每行都包含特定特征的相关数据;对于地理数据,Google Fusion Table 的每行还另外包含位置数据,其中保存有特征的位置信息。FusionTablesLayer 提供了一个 Fusion Table 界面,并支持自动呈现此位置数据,提供显示特征其他数据的可点击叠加层。

下面是显示地理数据的 Fusion Table 示例:

限制

您可以使用 Google Maps JavaScript API 向地图最多添加五个 Fusion Tables 图层,每个图层最多可以使用五条样式规则来设置样式。

此外:

  • 只有表格中的前 10 万行可以映射或包含到查询结果中。
  • 带有空间谓词的查询仅返回这前 10 万行中的数据。因此,如果您对一份较大的表格应用过滤器,且过滤器对前 10 万行之后的行中的数据进行匹配,这些行也不会显示。
  • 导入或插入数据时,请谨记:
    • 在一次 API 调用中发送的数据总大小不能超过 1MB
    • Fusion Table 中一个单元格的数据最多支持 1 百万个字符;有时,它可能需要降低坐标的精准度,或者简化多边形或线的描述
    • 每份表格最多支持 5 百万个顶点
  • 查看地图时,您可能会注意到:
    • 一个由多种几何形状组成的地图,将显示十个所占面积最大的部分
    • 进一步缩小地图时,超过 500 个特征的表格将显示点(而非线或多边形)

Fusion Table 设置

Fusion Tables 是数据表格,可提供内置的地理数据支持。如需了解详细信息,请参阅 Fusion Tables 简介。对于要在 Google 地图上显示 API 中的数据的 Fusion Tables 图层,该表格必须满足以下标准:

  • 表格必须以PublicUnlisted形式设置为共享
  • 表格必须有一个或多个显示为 Location 的列。在 Fusion Tables Web 界面中,选择 Edit > Modify Columns 并选择所需列

Location 列必须遵循以下格式要求。

  • 纬度/经度坐标可以输入到一列中,以逗号分隔 (latitude,longitude),也可以分为两列(纬度一列,经度一列)。如需了解详细信息,请参阅 Fusion Tables 文档
  • 地址必须先经过地理编码。在 Fusion Tables Web 界面中,选择 File > Geocode
  • 支持 KML 几何数据,如点、线和多边形

构建 FusionTables 图层

FusionTablesLayer 构造函数会使用一份公开 Fusion Table 的加密 ID 根据该表创建一个图层。在 Fusion Tables 用户界面中选择 File > About 即可找到此加密 ID。

要向地图添加 Fusion Tables 图层,请先创建图层,然后向其传递一个具有以下属性的 query 对象:

  • select 属性:其值是列名称,其中包含位置信息。如果列名称中包含空格或保留字,或者不是以字母开头,则须用引号括住该名称
  • from属性:其值为两种加密 ID 之一

然后,将图层的 map 设置为您的 Map 对象,就像任何其他叠加层一样。

注:较旧版本的 Google Maps JavaScript API 是通过 Fusion Table 的数字 ID 引用表格。此方法仍然有效,不过系统会优先使用加密 ID。

下例使用一份公开的 Fusion Table 显示了 2009 年芝加哥发生的凶杀案件:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

查看 Fusion table 示例

Fusion Table 查询

Fusion Table 还可让您应用强大的查询功能,该功能可根据指定标准对结果进行限制。您可以使用 FusionTablesLayerOptions query 参数指定查询:

query: {
  select: locationColumn,
  from: fusionTableID,
  where: constraintClause
}

其中,locationColumn 为类型 Location 现有的已经过地理编码的列。如果 selectwhere 字段中的列名称包含空格或保留字,或者不是以字母开头,则须用引号括住该名称。

Fusion Tables 文档中列出了支持的搜索运算符。

下例显示了芝加哥高速运输管理局 (CTA) 的红线地铁的沿线站点中,工作日的乘坐人数超过 5000 人次的站点:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}

查看 Fusion Table 示例

Fusion Table 样式

Fusion Tables 图层构造函数也接受 FusionTablesLayerOptions styles 参数,以便向线和多边形应用颜色、描边粗细和不透明度。您也可以通过支持的地图标记或图标名称来指定标记图标。

注:在每张地图中,仅可将样式应用于一个 Fusion Tables 图层。您最多可向该图层应用五种样式。

styles 参数使用以下语法:

styles: [{
  where: 'column_name condition',
  markerOptions: {
    iconName: "supported_icon_name"
  },
  polygonOptions: {
    fillColor: "#rrggbb",
    strokeColor: "#rrggbb",
    strokeWeight: "int"
  },
  polylineOptions: {
    strokeColor: "#rrggbb",
    strokeWeight: "int"  }
}, {
  where: ...
  ...
}]

样式会应用到 Fusion Tables Web 界面中所指定的任何样式之上。这些向图层构造函数提供的样式会按照它们的列出顺序进行应用,其中匹配多条规则的任意特征会采用最后一条匹配样式。

要创建应用到所有特征的默认样式,请创建不带 where 子句的样式:

styles: [{
  markerOptions: {
    iconName: "large_green"
  }
}]

下例显示了:

  • 默认样式,其中将所有多边形均设置为绿色,不透明度级别设置为 0.3
  • 将“鸟类”列超过 300 的所有多边形设置为蓝色,并保留默认样式所设置的不透明度级别
  • 将“人口”列超过 5 的所有多边形的不透明度级别设置为 1.0,并保留其 fillColor 值。
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}

查看 Fusion table 示例

Fusion Table 热图

Fusion Tables 还对热图提供一定的支持,并会以一组不同的颜色来表示匹配位置的密度。当前热图使用红色(密集)到绿色(稀少)的渐变来表示关联位置的相对份额。要启用热图,请将图层的 FusionTablesLayerOptions heatmap 参数设置为 enabled: true

注:Fusion Tables 热图是在服务器端呈现的。如果您想要客户端热图,请改为使用 Heatmap Layer

下例使用热图显示历史地震数据。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}

查看 Fusion table 示例

发送以下问题的反馈:

此网页
Google Maps JavaScript API
Google Maps JavaScript API
需要帮助?请访问我们的支持页面