darksky 经纬度_使用DarkSky API构建天气应用

最新推荐文章于 2024-06-21 09:49:02 发布

翻译最新推荐文章于 2024-06-21 09:49:02 发布 · 1k 阅读

文章标签：

#java #python #js #vue #javascript #ViewUI

本文介绍如何使用DarkSky API和Google Maps API构建天气预报应用，涵盖经纬度输入、动态天气数据提取及动画图标展示。

darksky 经纬度

网络构建几乎是每个人都可以享受到的乐趣，特别是当您使用API动态提取数据时。有些人可能称其为“网页应用程序”，有些人则称其为“网页”。无论如何，我们都将使用DarkSky和Google Maps API，JavaScript魔术和CSS动画来构建演示以显示天气预报。这很有趣，所以让我们开始吧！

注意：我们不会讨论构建过程的细节，但是您将从此概述中获得足够的信息来自己构建一些东西。

提示：要了解有关API和Web的更多信息，请查看Web开发中API的日益重要。

我们将要建设的

看一下演示。联机版本尚不可用，因为您需要向其添加API密钥。下载源文件并开始使用！

阴暗的天空

DarkSky提供了许多可用于天气信息的API。 DarkSky不仅为开发人员提供了API，还为iOS ， Android甚至Apple Watch提供了应用程序。

该API可以访问下周的每小时和每日天气预报，每分钟的“超本地”降雨预报，政府恶劣天气警报，数十年来的观测值，数十种语言，测量单位和易于理解的文档。有按需付款的定价模式，但每天的前1,000个预测是免费的。这部分很重要，特别是如果您想纯粹出于演示目的进行实验时。在前1000个请求之后，它将变为按预测$ 0.0001的付费服务。

DarkSky还提供对一组非常酷的动画预测图标的访问，以与它们的API一起使用。这些图标被称为Skycons （受Climacons启发很大），并使用canvas渲染。

标记

一旦获得了个人DarkSky API密钥，我们就可以开始比赛了，但是在离开大门之前，我们需要一个表格，所以让我们首先创建该标记。

<form method="get">
    <fieldset>
		<ul>
			<li>
				<label for="latitude">Latitude</label>
				<input type="text" id="latitude" placeholder="e.g. 42.9150747" required>
			</li>

			<li>
				<label for="longitude">Longitude</label>
				<input type="text" id="longitude" placeholder="e.g. -77.784323" required>
			</li>
		</ul>
	</fieldset>

	<button>Get Weather</button>
</form>

标记不过是一个表单元素，其中包含一些列表项和输入。这将是我们未来创作的基础。

这是我们的标记具有一些简单CSS样式的结果，该样式使输入浮动并添加背景颜色，以便我们可以看到渲染的标记。

自动填充输入

除了纬度和经度的两个输入外，我们可以走得更远。如果有人不知道这些在头顶上的坐标怎么办？为解决此问题，我们将添加另一个输入，以允许用户输入和检索城市名称所要求的预测-这将反过来神奇地自动填充坐标字段！

<li>
  <label for="city-search">City Name</label>
  <input type="text" id="city-search" placeholder="e.g. Rochester, NY">
</li>

单单使用这种标记就无法实现通过城市搜索自动填充坐标的目标。为此，我们需要使用Google Maps API。正如我们需要DarkSky的API密钥一样，我们也需要Google Maps的API密钥。您可以在此处获得个人Google Maps API密钥，本教程未提供。

Google Maps API请求

对于应用程序的这一部分，我们需要在URL中包含Google API脚本，该脚本包含您的个人API密钥。

<script src="https://maps.googleapis.com/maps/api/js?key=[your_api_key]&libraries=places,geometry"></script>

此脚本是加载Google Maps API的调用，但还有更多说明。

&libraries=places,geometry

网址包含参数&libraries=places,geometry 。除主要的Google Maps JavaScript API外，“位置”和“几何”服务是一组自包含的库。

使用为Google Maps注册的API密钥，我们可以从为搜索框创建JavaScript开始，该搜索框将根据用户类型显示城市。

var searchBox = new google.maps.places.SearchBox();

要以用户类型显示城市搜索，我们将使用“ 地方搜索框” 。

var searchBox = new google.maps.places.SearchBox(document.querySelector("#city-search"));

SearchBox()参数将传递给我们之前创建的搜索输入。

到目前为止，还不错，但是我们仍然需要附加一个事件侦听器，以便我们JavaScript知道发生了什么。

searchBox.addListener('places_changed', function() {});

参数 places_changed是当PlaceResult可用于用户选择的城市/位置时触发的事件。 Google Maps JavaScript API V3的完整文档也可供参考。

逻辑

此时，我们处于一个非常好的位置，因此让我们创建一些逻辑以放入搜索框事件监听器函数中。

searchBox.addListener('places_changed', function() {
    var locale = searchBox.getPlaces()[0];
});

使用定义为locale的变量来存储我们的位置，您可能会注意到传递searchBox.getPlaces()[0] 。此方法是一种神奇的方法，它将有助于根据所选城市（第一个城市）自动填充坐标，换句话说，将返回用户选择的查询。

最后一步是根据所选城市自动填充坐标，并将其放置在我们刚刚编写的事件监听器函数中的locale变量下。

document.querySelector("#latitude").value = place.geometry.location.lat();
document.querySelector("#longitude").value = place.geometry.location.lng();

这两行设置坐标输入的“值”，并使用place提供的geometry和location属性。

如果您愿意，甚至可以通过提供CSS类来设置自动完成和搜索框小部件的样式。

预报要求

为了与DarkSky进行交互，您需要注册一个帐户以获得API密钥。

https://api.darksky.net/forecast/[key]/[latitude],[longitude]

预测请求URL对于开发人员来说非常容易阅读。插入密钥，输入坐标，就可以提取数据了。

$.getJSON('https://api.darksky.net/forecast/[key]/[latitude],[longitude]', function(forecast) {});

DarkSky的结果以JSON（JavaScript对象表示法）形式返回，因此在生成请求时，您将需要使用getJSON方法。

$.getJSON([api_url], function(forecast) {
    console.log(forecast);
});

在上面的代码中，为了简单起见，我使用jQuery。 forecast参数将是返回结果的表示。

使用console.log将报告代表DarkSky的API数据的对象。如您所见，就可以检索的信息而言，有很多选择。

Skycon

要启动和使用Skycons，我们需要使用一些传统的深色魔术（也称为JavaScript）编写函数：

function skycons() {
    	var i,
			icons = new Skycons({
				"color" : "#FFFFFF",
				"resizeClear": true // nasty android hack
			}),
			list  = [ // listing of all possible icons
				"clear-day",
				"clear-night",
				"partly-cloudy-day",
				"partly-cloudy-night",
				"cloudy",
				"rain",
				"sleet",
				"snow",
				"wind",
				"fog"
			];

	// loop thru icon list array
	for(i = list.length; i--;) {
		var weatherType = list[i], // select each icon from list array
				// icons will have the name in the array above attached to the 
				// canvas element as a class so let's hook into them.
				elements    = document.getElementsByClassName( weatherType );

		// loop thru the elements now and set them up
		for (e = elements.length; e--;) {
			icons.set(elements[e], weatherType);
		}
	}
	
	// animate the icons
	icons.play();
}

Skycons的此方法必须放在我们之前编写的getJSON请求中。该功能将渲染并附加动画图标以动态创建预测； Skycons未记录的详细信息。