Google Map V3 天气和云况图层

软件技术 前端
1

此部分中的概念仅适用于 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，地图会自动停用天气图层，并恢复显示管理标签。

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

程序运行结果如下：

1063×923 285 KB

在线示例：
http://src.ossez.com/filedetails.php?repname=p&path=%2Fgmaps%2Fv3%2Fexamples%2Ftrunk%2Flayer-weather%2Flayer-weather.html

程序代码如下：[code]

html,body { height: 100%; margin: 0; padding: 0; }

#map_canvas {
height: 100%;
}

@media print {
html,body {
height: auto;
}
#map_canvas {
height: 650px;
}
}

OSSEZ Google Maps JavaScript API v3 Example: 天气和云况图层 function initialize() { var mapOptions = { zoom: 6, center: new google.maps.LatLng(42.91619499312524, -71.78464296874995), 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);
  }
</script>
[/code]