maps-api-v3_链接Google Maps和Flickr API

最新推荐文章于 2024-09-05 20:15:59 发布

daique1908

最新推荐文章于 2024-09-05 20:15:59 发布

阅读量294

点赞数

文章标签： python java 编程语言大数据 javascript ViewUI

maps-api-v3

想象您已经按照客户要求制作了精美的地图；添加各种有趣的标记，弹出窗口，自定义叠加层和照片。但是随后客户提到他们希望能够添加自己的照片而不会打扰您或自己进行任何编码。这是Flickr API派上用场的地方。

Flickr API允许您从本质上将Flickr网站用作照片的数据库或存储区域。使用Flickr API，您可以从Flickr抓取照片并将其显示在Google地图上的其他位置中。每当您或您的客户将照片添加到Flickr网站上的帐户时，您的Google地图都会自动更新。

如果您看一下该演示，则从我为本教程设置的Flickr帐户中提取单击“较小事件”按钮时出现的照片。或者，如果您查看我的朴茨茅斯历史地图，则单击“旧照片”按钮（右侧菜单）时出现的照片都是从Flickr中绘制的。

实际上，Flickr API可以让您做更多的事情，而不仅仅是从自己的帐户中获取照片。它使您能够在元数据上创建复杂的查询，并从所有Flickr用户绘制照片。这为您提供了非常强大的工具，可以将其用于各种有趣和创造性的用途。但是，不利的一面是，如果您以前没有使用过API，那么API的强大功能可能会使它有些畏缩，并且可能很难知道从哪里开始。考虑到这一点，本教程重点介绍从您自己的Flickr帐户绘制照片的示例，从而提供了完整的流程介绍。一旦掌握了这一点，就应该能够充分利用API的其余部分。

本教程以之前的教程为基础，其中介绍了如何将Flickr API与Google Maps API链接，从而介绍了如何使用Google Maps API进行创意和创建自定义叠加层。

关于API的快速提醒

API或应用程序编程接口是一种定义一组命令的理想方法，这些命令由公司（例如Facebook，Twitter，You Tube，Flickr）发布，允许任何人创建其内容的高度自定义版本。当人们谈论“混搭”时，表示他们已经使用两家或更多公司的API来组合内容。这些API实际上有成千上万种。请访问Programmable网站上的列表。

第一个教程介绍了Google Maps API如何使您能够执行各种操作，包括自定义颜色，地图标记，弹出框样式，细节级别，缩放级别。 Flickr API同样广泛。

Flickr API入门

要开始使用Flickr API，您需要创建一个Flickr帐户，然后向您的帐户添加一些照片，以便您可以使用。尝试使用来自不同位置的一些图片（稍后将很重要）。本教程中使用的图像位于此页面顶部的源文件中。

注意：如果使用这些图像，请注明在页面底部列出的原始创建者。

一旦您可以使用一些内容，就可以开始使用API。这些是一些关键网站。

Flickr API开发人员指南。这是一种“入门指南”。
Flickr API文档。这列出了所有API方法（即，您可以使用API进行的所有操作），可用于请求数据的格式以及可以返回数据的格式。
Flickr API帮助页面。

开始之前，您需要做的第一件事就是获取自己的API密钥。记下这些细节；您稍后需要它们！

Flickr API的“ Hello World”

看一下这个简单的例子 ; 它使用Flickr API从我为本教程创建的Flickr帐户中抓取照片。与其在此处列出隔离的代码片段，不如在整个网站上查看代码以了解事情是如何协同工作的，它会更加有用。转到简单的示例，右键单击页面并选择view source 。或从本页顶部下载源代码并将其拆开。

源代码中的注释提供了详细的说明，但是值得对几个关键区域进行逐步了解。

网址

了解最重要的事情是如何使用特殊的URL访问Flickr API。您可以构造此URL以“询问”所要获取的数据。该URL的第一部分是–

http://api.flickr.com/services/rest/

然后，您可以添加内容以指定要使用的内容。您添加的第一件事是方法–

http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos

然后，您添加所需的参数和格式，每个参数之间都带有＆符号-

http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&format=json&jsoncallback=?

user_id参数是您要用来绘制照片的帐户。使用idGettr解决这个问题。
api_key是您在上一步中获得的代码。您可以通过查看所选方法的文档来手动构造此URL，例如flickr.people.getPublicPhoto ，但这有点麻烦。

URL向导

幸运的是，Flickr在每个“方法”页面的底部提供了一个方便的向导的链接（称为API Explorer ）。不过要提个警告。默认情况下，向导生成的URL的末尾带有'nojsoncallback = 1'。由于我们需要将结果推送到函数中，因此在本例中，结尾应为“ nojsoncallback =？”。（有关更多详细信息，请参见JSON响应格式）。

因此，要构造调用Flickr API的URL，您需要：-

转到Flickr API文档主页，然后从右侧列表中选择要使用的方法。
然后在“方法”页面（例如flickr.people.getPublicPhoto ）上，仔细查看说明和详细信息，以确保这是适合您的方法。然后向下滚动到页面底部，然后单击API资源管理器链接。
在“ API资源管理器”页面上，填写有关参数的相关信息，然后向下滚动。选择JSON输出。（稍后将详细介绍输出格式）。然后，选择“不签署通话？” 当我们查看公共数据时。然后单击“ 呼叫方法”按钮（上方）。
现在看一下屏幕底部。您应该看到它为您提供了查询结果。而且，在最后，您需要使用URL！
如果将此URL复制到浏览器中，则实际上会看到查询结果。它们通常有点难以阅读，但是如果将结果复制到JSON Formatter中，那么所有内容都会被显示出来。如上所述，在使用此URL从您自己的网页内调用Flickr之前，请将结尾更改为“ nojsoncallback =？”，并记住用您自己的密钥替换api_key参数。

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=YOUR_FLICKR_API_KEY_HERE&user_id=YOUR_FLICKR_ID_HERE&format=json&jsoncallback=?", displayImages1);

捕捉结果

一旦构造了调用Flickr API的URL，我们就需要一种捕获结果的方法。我们使用$ .getJSON jQuery方法执行此操作。 $ .getJSON方法读取JSON格式（例如，下面的格式）的数据，并调用一个函数（在本例中为displayImages1) ，该函数以某种方式处理数据（在本例中在网页上显示图像）。

等待-JSON到底是什么？

当我们讨论JSON时，值得指出的是JSON只是一种格式化或结构化信息的方式，以便计算机可以读取它。如果查看上面的JSON输出，则可以开始查看代码如何访问数据的每一位。因此，例如， data.photos.photo （在简单示例的源代码中的displayImages1函数中查看）正在将javaScript定向到photo大多数信息的JSON中的photo数组中。然后，例如， var photoID = item.id; 正在访问每张照片的id元素。

最后一个例子：小猫

在继续之前，值得快速看一下另一个例子。让我们拥抱互联网的主要目的（即共享猫图片），然后找到标有“小猫”字样的图片。

为了最大化我们的小猫发现能力，这次我们要搜索每个人上传的照片。因此，第一步是构建Flickr API查询，如下所示-

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&tags=kitten&format=json&jsoncallback=?

此API调用使用flickr.photos.search方法。然后，将该URL馈入$.getJSON方法并以与第一个示例类似的方式进行处理。看一下实际示例以查看结果。可从此页面顶部的链接获得源代码。

看完两个示例之后，就可以使用API从Flickr帐户中获取自己的图像并将其显示在网页上。

冰山一角！

使用Flickr API的第一本画笔应该为您提供了其工作原理的关键原理。但是，您也可能已经开始注意到它有多大了！

这不是一件坏事，因为它为您提供了多种可能性。使用API文档就像一种“购物清单”一样。花点时间浏览一下这些方法（列在API文档首页的右侧），以查看提供的方法。

您可能还注意到了不同的请求格式（例如，我们使用“ rest”（如上面调用API的URL中的单词所示），响应格式（例如，我们使用JSON）以及可以使用的编程语言API（例如，我们正在使用JavaScript）。同样，这是API的优势，因为它意味着Flickr的内容可以移植到许多不同的应用程序中。

选择本教程中使用的组合，是因为它是学习Flickr API时很好的入门组合，并且是将此API与基于JavaScript的Google Maps API链接时的逻辑组合。仍然值得一看API文档首页左侧的其他选项。

地理标记

Flickr的优点在于，您可以编辑每张照片的各种元数据。

我们感兴趣的是每张照片的地理位置，并且很容易为每张图片设置：

登录到您的Flickr帐户。
点击左上方的“您”。
单击右下角的菜单图标（连续三个小圆圈）。
点击“添加到地图”。然后按照屏幕上的说明进行操作。 Flickr会自动计算并存储每张照片的纬度和经度。

您需要为每张照片重复此过程。

创建一个Google和Flickr混搭

在Flickr中对照片进行地理标记后，就可以在Google地图上显示它们。单击此处查看实时演示，然后单击鼠标右键以查看源代码。

与前面的示例类似，源代码中的注释给出了详细的解释。但是，值得强调一些关键点。首先，要构造调用Flickr API的URL，我们再次使用flickr.photos.search 。这次，我们包含了参数has_geo=1和extras=geo ，以确保每个图像的纬度和经度也包括在结果中。要查看调用Flickr API的URL的结果，请将其复制到浏览器中（如下所示），然后使用JSON Formatter更加清晰地查看输出。

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&has_geo=1&extras=geo&format=json&jsoncallback=?

另外，还需要指出的是，随着JavaScript代码遍历图像，它还使用Google Maps API使用Flickr API中的纬度和经度值来创建地图标记。然后，在body标签内，使用Google Maps API来创建地图本身。

您应该能够使用加载到Flickr中的自己的图像来重新创建类似的图像。 iTouchMap网站对于确定地图的中心点很有用。

Flickr和我们的英国节日地图

现在剩下要做的就是获取本教程中涵盖的所有内容，并将其应用于我们在本系列的第一篇和第二篇教程中构建的UK Festival Map。

这是我们的目标。如果单击“较小事件”按钮，您将看到从Flickr绘制的图像。

为了完整起见，我还添加了并非来自Flickr的图像到“主要节日”图标。另外，为了让您看到弹出框方面的不同选项，我为Flickr中的照片使用了“信息框”（用于“主要节日”）和默认的“信息窗口”。

通过对上一教程中的代码进行一些调整，并添加Google Maps和Flickr mashup（如上）中的代码，来创建此地图。我们首先创建一个变量（ smallEventsToggle ），以保存当前是否显示“小事件”标记。然后，在handelRequests函数中创建一个新选项，以处理单击“小事件”按钮（ smallEvents ）时的情况。最后，添加了上一步的代码，并完成了一些修改，例如更改默认地图标记。

与往常一样，为节省教程中的大片段，可下载源代码中的注释提供了详细说明。

接下来是什么？

下一个教程将探讨优化，响应式设计，调试和测试。

图片积分

在第一个教程的结尾可以找到地图标记本身上的照片。

翻译自: https://webdesign.tutsplus.com/articles/linking-up-the-google-maps-and-flickr-apis--webdesign-14199

maps-api-v3

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
maps-api-v3_链接Google Maps和Flickr API

想象您已经按照客户要求制作了精美的地图；添加各种有趣的标记，弹出窗口，自定义叠加层和照片。但是随后客户提到他们希望能够添加自己的照片而不会打扰您或自己进行任何编码。这是Flickr API派上用场的地方。 Flickr API允许您从本质上将Flickr网站用作照片的数据库或存储区域。使用Flickr API，您可以从Flickr抓取照片并将其显示在Google地图上的其他位置中...
复制链接

扫一扫