Google Maps API V3 之 图层

图层概述

图层是地图上的对象，包含一个或多个单独项，但可作为一个整体进行操作。图层通常反映了您添加到地图上用于指定公共关联的对象集合。Maps API 会通过以下方法管理图层内对象的显示形式：将图层的组成项呈现在一个对象（通常为一个图块叠加层）中并根据地图视口的变化情况进行显示。图层还可以改变地图自身的展示图层，以符合图层样式的方式稍稍改变基本图块。请注意，系统将大部分图层设计为禁止通过其单个对象进行访问，而仅可将其作为一个整体来操作。

要在地图上添加图层，只需调用 setMap() 并向其传递要在其中显示图层的地图对象即可。类似地，要隐藏图层，只需调用 setMap() 并传递 null 即可。

Maps API 包含以下几种图层：

  • KmlLayer 对象，用于在 Maps API V3 图块叠加层中呈现 KML 和 GeoRSS 元素。
  • HeatmapLayer 对象，使用热图可视化技术来呈现地理数据。
  • FusionTablesLayer 对象，用于呈现 Google Fusion Tables 中包含的数据。
  • TrafficLayer 对象，用于呈现描述路况情况的图层和表示路况的叠加层。
  • TransitLayer 对象，用于在地图上显示您所在城市的公交网络。
  • WeatherLayer 和 CloudLayer 对象，可让您向地图添加天气预报和云图。
  • BicyclingLayer 对象，用于在公共图层中呈现自行车道的图层和/或自行车专用叠加层。默认情况下，在请求出行模式 BICYCLING 的路线时，系统会在DirectionsRenderer 中返回该图层。
  • PanoramioLayer 对象，用于添加 Panoramio 中的照片作为图层。
  • DemographicsLayer 对象，用于呈现美国的受众特征信息作为图层，仅供 Google Maps API for Business 客户使用。该对象包含在 visualization 库内。

下面将分别介绍这些图层。

KML 和 GeoRSS 图层

Google Maps API 支持采用 KML 和 GeoRSS 数据格式来显示地理信息。这些数据格式使用 KmlLayer 对象显示在地图上，其构造函数采用可公开访问的 KML 或 GeoRSS 文件的网址。

如需了解支持的元素、大小和复杂性限制，请访问 KML 文档中的 KML 支持网页。

Maps API 会将提供的地理 XML 数据转换为 KML 表现形式，该表现形式可使用第 3 版图块叠加层显示在地图上。该 KML 在外观上与用户熟悉的第 3 版叠加层元素类似（两者在行为上也有几分类似）。KML <Placemark> 和 GeoRSS point 元素会呈现为标记，例如，<LineString> 元素呈现为折线，而 <Polygon> 元素则呈现为多边形。类似地，<GroundOverlay> 元素会在地图上呈现为矩形图片。不过，这些对象都不是 Google Maps API Marker、Polyline、Polygon 或 GroundOverlay，而只是地图上呈现的单个对象，这一点非常重要。

设置 KmlLayer 对象的 map 属性后，这些对象就会显示在地图上。（您可以调用 setMap() 传递 null，以从地图删除这些对象。）KmlLayer 对象会通过自动检索地图给定边界的相应地图项来管理这些子元素的呈现形式。随着边界的变化，当前视口中的地图项会自动呈现。

由于 KmlLayer 中的组件为按需呈现，因此您可以借助图层轻松地管理成千上万个标记、折线和多边形的呈现方式。请注意，尽管这些组成对象都提供了点击事件，以返回这些单个对象的相关数据，但您无法直接访问这些对象。

KML 图层选项

KmlLayer() 构造函数可以传递以下多个 KmlLayerOptions：

  • map，用于指定要在其上呈现 KmlLayer 的 Map。您可以在 setMap() 方法中将此值设为 null，从而隐藏 KmlLayer。
  • preserveViewport，用于指定不应在显示图层时按 KmlLayer 内容的边界调整地图。默认情况下，在显示 KmlLayer 时，系统会缩放并定位地图以完整地显示图层内容。
  • suppressInfoWindows，用于指定 KmlLayer 中的可点击地图项不应触发显示 InfoWindow 对象。

此外，KmlLayer 呈现后，将包含不可改变的 metadata 属性，该属性在 KmlLayerMetadata 对象文字中包含图层的名称、说明、摘要和作者。您可以使用 getMetadata() 方法检查此信息。由于呈现 KmlLayer 对象需要与外部服务器进行异步通信，因此您将需要监听 metadata_changed 事件，该事件将用于表示属性已填充。

以下示例根据给定的 GeoRSS Feed 构造了一个 KmlLayer：

var myLatLng = new google.maps.LatLng(49.496675, -102.65625);
var mapOptions = {
  zoom: 4,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}  

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

var georssLayer = new google.maps.KmlLayer(‘http://api.flickr.com/services/feeds/geo/[email protected]&lang=en-us&format=feed-georss‘);
georssLayer.setMap(map);

以下示例根据给定的 KML Feed 构造了一个 KmlLayer：

var myLatLng = new google.maps.LatLng(41.875696, -87.624207);
var mapOptions = {
  zoom: 11,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}  

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

var ctaLayer = new google.maps.KmlLayer(‘http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml‘);
ctaLayer.setMap(map);

KML 地图项详情

由于 KML 可包括大量地图项，因此您可能无法直接访问 KmlLayer 对象中的地图项数据。相反，在显示地图项时，系统会将其呈现为与可点击的 Maps API 叠加层类似。默认情况下，点击单个地图项即可显示 InfoWindow，其中包含给定地图项的 KML <title> 和 <description> 信息。此外，点击 KML 地图项会生成 KmlMouseEvent，该事件将传递以下信息：

  • position，用于表示要锚定的此 KML 地图项的 InfoWindow 的纬度/经度坐标。对于多边形、折线和 GroundOverlay，该位置通常为点击位置，不过对于标记则为坐标原点。
  • pixelOffset，用于表示相对于上述 position 的偏移量，以锚定 InfoWindow 的“尾部”。对于多边形对象，该偏移量通常为 0,0，不过对于标记则会包含标记的高度。
  • featureData，其中包含采用 JSON 结构的 KmlFeatureData。

KmlFeatureData 对象示例如下所示：

{
  author: {
    email: "[email protected]",
    name: "Mr Nobody",
    uri: "http://example.com"
  },
  description: "description",
  id: "id",
  infoWindowHtml: "html",
  name: "name",
  snippet: "snippet"
}

以下示例显示了点击地图项时一侧 <div> 中的 KML 地图项 <Description> 文本：

ar myLatLng = new google.maps.LatLng(40.65, -73.95);
var mapOptions = {
  zoom: 12,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}  

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

var nyLayer = new google.maps.KmlLayer(‘http://www.searcharoo.net/SearchKml/newyork.kml‘,
    {suppressInfoWindows: true});
nyLayer.setMap(map);
google.maps.event.addListener(nyLayer, ‘click‘, function(kmlEvent) {
  var text = kmlEvent.featureData.description;
  showInDiv(text);
});  

function showInDiv(text) {
  var sidediv = document.getElementById(‘contentWindow‘);
  sidediv.innerHTML = text;
}

热图图层

此部分中的概念仅适用于 google.maps.visualization 库中提供的地图项。默认情况下，系统在加载 Maps JavaScript API 时不会加载该库，您必须使用 libraries 引导程序参数进行明确指定。

热图图层可在客户端呈现热图。热图是一种可视化效果，用于描绘各地理点的数据强度。启用热图图层后，地图上方就会显示一个带颜色的叠加层。默认情况下，强度较高的地区会显示为红色，而强度较低的地区会显示为绿色。

Google Maps JavaScript API 既可以通过热图图层在客户端呈现热图数据，也可以通过 Fusion Table 在服务器端呈现热图数据。这两种方法之间的一些关键区别包括：

热图图层 Fusion Table 图层
大量的数据点可能导致性能低下。 数据点增多不会对性能造成什么影响。
通过更改如下选项，能够自定义热图的外观：颜色渐变、数据点半径以及各数据点的强度。 无法自定义热图的外观。
能够控制热图数据是否在较高的缩放级别下消失。 所有热图数据都会在您进行放大时消失。
数据可以通过 HTML 存储、存储在服务器上或者实时计算。数据可在运行时更改。 所有数据都必须存储在 Fusion Table 中。在运行时无法轻易更改数据。

要添加热图，您必须首先新建一个 HeatmapLayer 对象，并以数组或 MVCArray[] 对象的形式为其提供一些地理数据。这些数据可以是 LatLng 对象，也可以是WeightedLocation 对象。将 HeatmapLayer 对象实例化后，通过调用 setMap() 方法将该对象添加到地图中。

以下示例向旧金山的地图添加了 14 个数据点。

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];  

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);  

map = new google.maps.Map(document.getElementById(‘map_canvas‘), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.SATELLITE
});  

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

添加加权数据点

热图既可以呈现 LatLng() 和 WeightedLocation 对象中的任一个，也可以呈现这两者的组合。这两个对象都代表地图上的单个数据点，但是 WeightedLocation 对象可让您额外指明该数据点的权重。对数据点加权后，WeightedLocation 会以高于简单 LatLng 对象的强度进行呈现。权重是线性标度，其中每个 LatLng 对象的隐性权重均为 1；添加单个 {location: new google.maps.LatLng(37.782, -122.441), weight: 3} 的 WeightedLocation 与添加三次 google.maps.LatLng(37.782, -122.441) 的效果相同。您可以在单个数组中混合 weightedLocation 与 LatLng 对象。

在执行以下操作时，使用 WeightedLocation 对象代替 LatLng 会很有用：

  • 在单个位置添加大量数据。以 1000 的权重呈现单个 WeightedLocation 要比呈现 1000 个 LatLng 对象快。
  • 根据任意值对您的数据加以强调。例如，您在绘制地震数据时可以使用 LatLng 对象，但在测量各地震的里氏震级时应使用 WeightedLocation。
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},  

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];  

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);  

map = new google.maps.Map(document.getElementById(‘map_canvas‘), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.SATELLITE
});  

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

自定义热图图层

您可以通过以下热图选项自定义您的热图的呈现方式。有关详情，请参阅 HeatmapLayerOptions 文档。

  • dissipating：指定热图是否在缩放时消失。如果将 dissipating 设为 false，那么影响半径会随着缩放级别而增大，从而确保在任何给定的地理位置保留颜色强度。默认值为 false。
  • gradient：热图的颜色渐变，以 CSS 颜色字符串数组的形式指定。支持所有 CSS3 颜色（包括 RGBA），扩展命名的颜色除外。
  • maxIntensity：热图的最大强度。默认情况下，热图颜色根据地图上任意像素处点的最大集中程度而动态调节。该属性可让您指定一个固定的最大值。如果您的数据集中包含一些强度偏高的异常值，设置最大强度会很有帮助。
  • radius：各个数据点的影响半径，单位为像素。
  • opacity：热图的透明度，以 0 到 1 之间的数字表示。

Fusion Table 图层（实验性）

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

限制

您可以使用 Maps API 向地图添加最多 5 个 Fusion Tables 图层，其中一个图层可使用最多 5 个样式化规则进行样式化。

此外：

  • 查询结果中仅会映射或包含表格中的前 100,000 行数据。
  • 使用空间预测的查询仅会返回这前 100,000 行中的数据。因此，如果您在较大的表格中应用了过滤器，且该过滤器与前 100,000 行后的数据相匹配，则不会显示这些行。
  • 在导入或插入数据时，请注意以下事项：
    • 一个 API 调用中发送的数据总量上限为 1MB。
    • Fusion Table 中的数据单元格最多可支持一百万个字符；有时，您可能需要降低坐标的精确度或简化多边形或线段描述。
    • 每个表格所支持的顶点数量上限为 5 百万。
  • 在查看地图时，您可能会注意到：
    • 显示了多几何图形的 10 个最大区域组成部分。
    • 进一步缩小后，具有超过 500 个地图项的表格将显示点（而非直线或折线）。

Fusion Table 设置

Fusion Tables 是数据表格，可提供内置的地理数据支持。有关 Fusion Tables 的完整文档，请参阅 Fusion Tables 开发者指南。对于在 Google 地图上的 API 中显示数据的 Fusion Tables 图层，相应表格必须符合以下标准：

  • 该表格必须作为公开或不公开表格进行共享。
  • 该表格必须有一列或多列显示为 Location。在 Fusion Tables 网络界面中，依次选择修改 > 修改列 (Edit > Modify Columns)，然后选择所需的列。

Location 列必须符合以下格式要求。

  • 纬度/经度坐标可以输入为用单列、英文逗号分隔的形式（纬度,经度），也可以分成两列（一列为纬度，另一列为经度）。有关详情，请参阅 Google Fusion Tables 帮助中心内的如何指定带有位置信息的列？。
  • 地址必须先经过地理编码处理。在 Fusion Tables 网络界面中，选择文件 > 地理编码。
  • 支持 KML 几何数据，如点、线和多边形。

构建 FusionTables 图层

FusionTablesLayer 构造函数可使用表格的加密 ID 通过公开 Fusion Table 创建图层，在 Fusion Tables 用户界面中选择文件 > 关于即可找到该 ID。

要向地图添加 Fusion Tables 图层，请先创建图层，然后传递带有以下参数的 query 对象：

  • select 属性，该属性的值为包含位置信息的列的名称。对于包含空格、保留字词或者未以字母开头的任何列名称，您都必须为其加上双引号。
  • from 属性，该属性的值为任一加密 ID。

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

旧版的 Google Maps JavaScript API 按数字 ID 引用 Fusion Table。尽管该方法仍可继续使用，但应该优先选用加密 ID。

以下示例使用公开的 Fusion Table 显示了 2009 年芝加哥发生凶杀的地点：

var chicago = new google.maps.LatLng(41.850033, -87.6500523);  

map = new google.maps.Map(document.getElementById(‘map_canvas‘), {
  center: chicago,
  zoom: 12,
  mapTypeId: ‘roadmap‘
});  

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

Fusion Table 查询

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

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

其中 locationColumn 是现有的经过地理编码的列（类型为 Location）。对于 select 或 where 字段中的包含空格、保留字词或者未以字母开头的任何列名称，您都必须为其加上双引号。以下示例显示了芝加哥高速运输管理局 (CTA) 的红线地铁的沿线站点中，工作日的乘坐人数超过 5000 人次的站点：

var chicago = new google.maps.LatLng(41.948766, -87.691497);  

map = new google.maps.Map(document.getElementById(‘map_canvas‘), {
  center: chicago,
  zoom: 12,
  mapTypeId: ‘roadmap‘
});  

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

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 网络界面中所指定的任何样式。向图层构造函数提供的样式随后会按照相应的列出顺序进行应用，其中任何与多条规则相匹配的地图项都会采用最后一个匹配样式。

要创建应用到所有地图项的默认样式，请创建一个不带 where 子句的样式：

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

以下示例显示了：

  • 默认样式，其中将所有多边形设为绿色，透明度级别设为 0.3。
  • 将“鸟类”列超过 300 的所有多边形设为蓝色，并保留默认样式设置的透明度级别。
  • 将“人口”列超过 5 的所有多边形的透明度级别设为 1.0，并保留其 fillColor 值。
var australia = new google.maps.LatLng(-25, 133);  

map = new google.maps.Map(document.getElementById(‘map_canvas‘), {
  center: australia,
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});  

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 Tables 还对热图提供一定的支持，并会以一组不同的颜色来表示匹配位置的密度。当前热图使用了红色（密集）到绿色（稀少）的渐变来表示关联位置的相对份额。要启用热图，请将图层的 FusionTablesLayerOptions heatmap 参数设置为 enabled: true。

以下示例使用热图显示了巴西海岸的指定海滩：

var brazil = new google.maps.LatLng(-18.771115, -42.758789);  

map = new google.maps.Map(document.getElementById(‘map_canvas‘), {
  center: brazil,
  zoom: 5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});  

layer = new google.maps.FusionTablesLayer({
  query: {
    select: ‘LATITUDE‘,
    from: ‘0ILwUgu7vj0VSZnVzaW9udGFibGVzOjEzNjcwNQ‘
  },
  heatmap: {
    enabled: true
  }
});
layer.setMap(map);

路况图层

在 Google Maps API 中，您可以使用 TrafficLayer 对象向地图添加实时路况信息（如果支持的话）。路况信息会在提出请求时提供。要确定路况覆盖范围的支持情况，请查看此电子表格。

var myLatLng = new google.maps.LatLng(39.915972, 116.395686);//北京交通路况
var mapOptions = {
  zoom: 13,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}  

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

公交图层

Google Maps API 可让您使用 TransitLayer 对象在地图上显示某个城市的公交网络。启用公交图层并以支持公交信息的城市作为地图的中心后，地图会将主要公交线路显示为带颜色的粗线。线的颜色根据公交线路运营机构所提供的信息而设置。启用公交图层会更改基本地图本身的样式，以突出显示公交路线。

公交信息只适用于选定位置。要查看当前提供公交信息的城市列表，请参阅该列表。

如果您供职于负责监督所在城市的公交情况的公共机构，并希望将所在城市的公交数据录入 Google 地图，请访问 Google 公交合作伙伴计划网站以了解详情。

以下示例在北京的地图上显示了支持的公交图层：

function initializeTransitLayer() {
                var myLatLng = new google.maps.LatLng(51.501904, -0.115871);
                var mapOptions = {
                    zoom: 13,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }  

                var map = new google.maps.Map(document.getElementById("map"), mapOptions);  

                var transitLayer = new google.maps.TransitLayer();
                transitLayer.setMap(map);
            }

骑行图层

在 Google Maps API 中，您可以使用 BicyclingLayer 对象向地图添加骑行信息。BicyclingLayer 用于在给定地图的顶部呈现一个骑行路径、推荐骑行路线以及骑行专用的其他叠加层的图层。此外，该图层会更改基本地图本身的样式，以突出显示支持骑行路线的街道，并弱化显示不适合骑行的街道。

以下示例在麻萨诸塞州剑桥的地图上显示了支持的骑行图层：

var myLatLng = new google.maps.LatLng(42.3726399, -71.1096528);
var mapOptions = {
  zoom: 14,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}  

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);

深绿色路线表示专用的骑行路线。浅绿色路线表示有专用“自行车车道”的街道。虚线路线表示不建议骑行的街道或路径。

天气和云况图层（库）

此部分中的概念仅适用于 google.maps.weather 库中提供的地图项。默认情况下，系统在加载 Maps JavaScript API 时不会加载该库，您必须使用 libraries 引导程序参数进行明确指定。

您可以通过 google.maps.weather 库的 WeatherLayer 类和 CloudLayer 类在地图上显示天气数据和云图。启用云况图层会在地图中添加云量图像（在 0 到 6 的缩放级别下显示）。启用天气图层会在地图上显示来自 weather.com 的当前天气状况，其中包括表示晴天、多云、雨天等天气的图标。点击某个特定地区的天气图标会打开一个信息窗口，其中列出了当前湿度和风况等详细数据，以及未来四天的天气预报。您可以通过 WeatherMouseEvent 对象的 featureDetails 属性访问这些详细数据。以下示例在您单击图标时进行检测，然后显示相关位置的当前温度。

google.maps.event.addListener(weatherLayer, ‘click‘, function(e) {
  alert(‘The current temperature at ‘ + e.featureDetails.location + ‘ is ‘
        + e.featureDetails.current.temperature + ‘ degrees.‘);
});

利用 WeatherLayerOptions 对象，您可以停用信息窗口，配置天气图层上显示的标签颜色，并自定义显示的温度单位（摄氏度或华氏度）和风速单位（公里/小时、英里/小时或米/秒）。

如果启用了天气图层且缩放级别设为 12 或以下，那么您的地图上会停用管理标签（如街道或地区的名称）。如果缩放级别为 13，地图会自动停用天气图层，并恢复显示管理标签。

以下示例启用了云况和天气图层，并将默认单位设为华氏度。

var mapOptions = {
  zoom: 6,
  center: new google.maps.LatLng(49.265984, -123.127491),
  mapTypeId: google.maps.MapTypeId.ROADMAP
};  

var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);  

var weatherLayer = new google.maps.weather.WeatherLayer({
  temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);  

var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);

Panoramio 图层（库）

此部分中的概念仅适用于 google.maps.panoramio 库中提供的地图项。默认情况下，系统在加载 Maps JavaScript API 时不会加载该库，您必须使用 libraries 引导程序参数进行明确指定。

使用 PanoramioLayer 对象

您可以使用 PanoramioLayer 对象将 Panoramio 中的照片添加为地图的图层。PanoramioLayer 会在地图上将 Panoramio 中的照片图标（已加注地理位置标签）的图层呈现为一系列不同大小的照片图标。

要向您的地图添加 PanoramioLayer，只需创建以下对象并设置其地图属性即可：

var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
panoramioLayer.setMap(map);

默认情况下，点击 Panoramio 图层内的照片图标会弹出一个信息窗口，其中显示了较大的照片和更多信息。要删除该默认行为，您只需将图层的 suppressInfoWindows 属性设为 true 即可。您也可以检查与单张 Panoramio 照片相关联的元数据，方法是处理 PanoramioLayer 上的 ‘click‘ 事件，并检查 PanoramioMouseEvent 的 featureDetails 属性。请注意，如果您要实现自己的点击处理程序且不显示默认的信息窗口，那么您对 Panoramio 照片的使用行为必须遵循 Panoramio API 服务条款，包括任何品牌塑造和版权归属要求。

以下示例显示了华盛顿州西雅图的 Panoramio 图层。您每点击一张照片，右侧面板中就会增加一个指向的 Panoramio 照片页的链接：

var fremont = new google.maps.LatLng(47.651743, -122.349243);
var mapOptions = {
  zoom: 16,
  center: fremont,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};  

var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    mapOptions);  

var panoramioLayer = new google.maps.panoramio.PanoramioLayer();  

panoramioLayer.setMap(map);  

google.maps.event.addListener(panoramioLayer, ‘click‘, function(event) {
  var photoDiv = document.getElementById(‘photoPanel‘);
  var attribution = document.createTextNode(event.featureDetails.title + ": " + event.featureDetails.author);
  var br = document.createElement("br");
  var link = document.createElement("a");
  link.setAttribute("href", event.featureDetails.url);
  link.appendChild(attribution);
  photoDiv.appendChild(br);
  photoDiv.appendChild(link);
});

按标记或用户 ID 限制照片

您可以将要显示在 PanoramioLayer 上的照片组限制为与特定文本标记或特定用户相匹配的照片。

要仅显示与特定标记相匹配的照片，请对 PanoramioLayer 对象调用 setTag()。系统会将图层更新为仅显示地图视口内与该标记相匹配的照片。要仅显示与特定用户相匹配的照片，请对 PanoramioLayer 对象调用 setUserId()。

以下示例显示了未经标记过滤的纽约港口的地图。在输入字段中输入文字，然后使用 setTag() 方法应用过滤器：

var panoramioLayer;
function initialize() {
  var nyHarbor = new google.maps.LatLng(40.693134, -74.031028);
  var mapOptions = {
    zoom: 15,
    center: nyHarbor,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };  

  var map = new google.maps.Map(
      document.getElementById("map_canvas"),
      mapOptions);  

  panoramioLayer = new google.maps.panoramio.PanoramioLayer();  

  panoramioLayer.setMap(map);
}  

function getTaggedPhotos() {
  var tagFilter = document.getElementById(‘tag‘).value;
  panoramioLayer.setTag(tagFilter);
}

使用 Panoramio Widget API

您还可以使用 Panoramio Widget API 在 PanoramioWidget 对象内显示图片。要使用 Panoramio API，您需要通过脚本标记单独从 JavaScript API 中为该 API 加载 JavaScript 符号：

<script type="text/javascript" src="http://www.panoramio.com/wapi/wapi.js?v=1">
</script>

Panoramio PhotoWidget 的默认大小为 400x 300 像素。如果您希望在信息窗口中显示 PhotoWidget，则可以使用该默认大小，也可以在 PhotoWidget 的构造函数内明确设置大小。请注意，PhotoWidget 不会自动根据其容器（在此情况下为信息窗口）的大小来调整自身大小。您需要明确设置该小部件的宽度和高度。

以下示例借助 Panoramio Widget API 使用 Panoramio 图片填充了信息窗口。请注意，您可以轻松地配置该小部件，以便显示多张图片。

// This example requires loading the Panoramio Widget API
// via http://www.panoramio.com/wapi/wapi.js?v=1  

// The photoDiv defines the DIV within the info window for
// displaying the Panoramio photo within its PhotoWidget.
// We use the info window‘s maximum size of 640 px.
var photoDiv =  document.createElement("div");
photoDiv.style.width = ‘640px‘;
photoDiv.style.height = ‘500px‘;  

// The PhotoWidget width and height are expressed as number values,
// not string values so we need to turn them into floats.
var photoWidgetOptions = {
  ‘width‘: parseFloat(photoDiv.style.width),
  ‘height‘: parseFloat(photoDiv.style.height)
};  

// We construct a PhotoWidget here with a blank (null) request as we
// don‘t yet have a photo to populate it.
var photoWidget = new panoramio.PhotoWidget(photoDiv, null, photoWidgetOptions);  

var monoLake = new google.maps.LatLng(37.973432, -119.093170);
var mapOptions = {
  zoom: 11,
  center: monoLake,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};  

var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    mapOptions);  

var photoWindow = new google.maps.InfoWindow();
var panoramioOptions = {
  suppressInfoWindows: true
}
var panoramioLayer = new google.maps.panoramio.PanoramioLayer(panoramioOptions);  

panoramioLayer.setMap(map);  

google.maps.event.addListener(panoramioLayer, ‘click‘, function(event) {  

  var photoRequestOptions = {
    ids: [{‘photoId‘: event.featureDetails.photoId,
           ‘userId‘: event.featureDetails.userId}]
  }
  photoWidget.setRequest(photoRequestOptions);
  photoWidget.setPosition(0);  

  photoWindow.setPosition(event.latLng);
  photoWindow.open(map);
  photoWindow.setContent(photoDiv);
});
时间： 2024-10-20 03:10:42

Google Maps API V3 之 图层的相关文章

Google Maps API V3 之 路线服务

概述 您可以使用 DirectionsService 对象计算路线(使用各种交通方式).此对象与 Google Maps API 路线服务进行通信,该服务会接收路线请求并返回计算的结果.您可以自行处理这些路线结果,也可以使用 DirectionsRenderer 对象呈现这些结果. 您可以通过文本字符串(例如,“伊利诺斯州芝加哥市”或“澳大利亚新南威尔士州达尔文市”)或 LatLng 值的形式来指定路线的起点和终点.路线服务可以使用一系列路标返回多段路线.路线可以显示为一条在地图上绘制路线的折线

Google Maps API V3 之绘图库 信息窗口

绘图库 本文档中的概念仅适用于 google.maps.drawing 库中提供的地图项.默认情况下,系统在加载 Maps JavaScript API 时不会加载该库,您必须使用 libraries 引导程序参数进行明确指定. http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing DrawingManager 类提供了一个图形界面,以供用户在地图上绘制多边形.矩形.折线.圆形和标记.DrawingManage

Google Map API V3开发（6） 代码

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Google Maps API V3 Demo</title> <script type="text/javascript" src='http://maps.googleapis.com/maps/api/js?v=3&sensor=tru

Google Map API V3开发（2）

3 Google Map API 简介 Google 地图 API 免费提供给用户并且适用于所有网站.Google 地图 API 使您能够使用 JavaScript 将 Google地图嵌入自己的网页中.API 提供了大量实用工具用以处理地图(正如 http://ditu.google.com 网页上的地图),并通过各种服务向地图添加内容,从而使您能够在您的网站上创建功能强大的地图应用程序. 4 帮助资源 ?Google Maps JavaScript API v3 ?中文页面:https://

Google 地图 API V3 之事件

概述 浏览器中的 JavaScript 是由事件驱动的,这表示 JavaScript 会通过生成事件来响应交互,并期望程序监听感兴趣的事件.Google Maps API V3 的事件模型与 Google Maps API V2 中所使用的事件模型尽管在内在机制上有很大的不同,但两者是十分相似的.有两种类型的事件: 用户事件(如“点击”鼠标事件)是从 DOM 传播到 Google Maps API 中的.这些事件是独立的,并且与标准 DOM 事件不同. MVC 状态更改通知反映了 Maps AP

Google 地图 API V3 针对移动设备进行开发

针对移动设备进行开发 Google Maps API v3 旨在实现快速加载,并可在移动设备上稳定运行.尤其是,我们已专注于针对 Android 和 iOS 手机等先进的移动设备进行开发.与桌面计算机上的传统浏览器相比,移动设备的屏幕较小.而且,移动设备通常具备独有的特定行为(例如“双指张合缩放”).如果您想让自己的应用在移动设备上稳定运行,建议您执行以下操作: 将包含您地图的 <div> 的宽度属性和高度属性都设为 100%.不过请注意,在一些旧版的桌面浏览器上使用这些值无法获得良好的显示效

Google Map API V3开发（4）

9 图层 Maps API 包含以下几种图层: KmlLayer 对象,用于在 Maps API V3 图块叠加层中呈现 KML 和 GeoRSS 元素. HeatmapLayer 对象,使用热图可视化技术来呈现地理数据. FusionTablesLayer 对象,用于呈现 Google Fusion Tables 中包含的数据. TrafficLayer 对象,用于呈现描述路况情况的图层和表示路况的叠加层. TransitLayer 对象,用于在地图上显示您所在城市的公交网络. Weather

Google 地图 API V3 使用入门

鉴于google被屏蔽,复制过来,供参考. Hello, World 要开始了解 Google Maps API,最简单的方法就是查看简单的示例.以下网页显示了一张以澳大利亚新南威尔士的悉尼为中心的地图: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <sty

google map api v3

<!DOCTYPE html> <html> <head> <script type="text/javascript"> function killerrors() { return true; } window.onerror = killerrors; </script> <meta name="viewport" content="initial-scale=1.0, user-sc