如何混搭Google Maps API和Flickr

摘要：混搭是指“将多个来源内容无缝组合成一个集成体验”的Web应用。通过获取来自不同Web站点的内容，并将其置于的集成界面或程序加以应用。文章是基于Google Maps的混搭：目标帮助用户搜索自有数据库中带有地理标签的Flickr照片并使它在某张Google地图上响应，再点击时显示各图的详细信息等。

关键词：Google Maps；Flickr用户图片；mashup；Web站点；混搭 文献标识码：A

中图分类号：TP393 文章编号：1009-2374（2016）06-0064-02 DOI：10.13535/j.cnki.11-4406/n.2016.06.032

1 概述

混搭是当今的热点主题之一，它能使你成为一项共同事业或活动中的一份子。看到那些熟悉的事物放到一起，创造出新的，超出简单相加的结果，令人相当愉快。混搭是非常强大的，可以令我们事半功倍。也许并不会永远都用到，但总可以不需要投入过多的精力从中获得自己需要的东西。

1.1 选题的意义

基于Google Maps的混搭帮助用户搜索自有数据库中带有地理标签的Flickr照片并使它在某张Google地图上响应，再点击时显示各图的详细信息等。具体可提供开源的API，给旅游公司或景点提供游客平台，实现“游后”增值互动服务。

1.2 混搭Mashup

Mashup即Web应用混搭技术，是利用开源网站的API和工具进行自定义搭配来制作出独特的、具有个体创意性的Web应用的一种技术。其精髓在于提供新的服务，从组合中获取新的价值。典型的Mashup会使用Web上的数据，并围绕一个特定的主题来组织。

网络地图通常邀请用户在地图上填充资料，为电子地图添加图标同时加入一些独立信息。地图Mashup则会自动结合至少一个数据源使之成为一张新的地图，它起源于互联网，用Google Map、Yahoo Map等作为平台，利用一系列API和数据库接口来创建新的专属性地图，在一定程度减轻了一张地图上的所有类型数据的负担。

Mashup通常由三个部分组成：数据提供者、Mashup站点和客户浏览器，来自客户浏览器的请求传向Mashup站点所在的web服务器。请求的页面包括HTML和JavaScript，由JavaScript在调用一个或多个数据提供者的API服务后，按照逻辑进行组合并在客户浏览器中

显示。

IBM Mashup Center是一种易于使用的Mashup平台，支持动态环境应用程序的业务线装配，提供了管理、安全和治理功能。IBM Mashup Center结合了来自IBM Lotus Mashups的直观用户Mashup功能和IBM InfoSphere Mashup Hub的信息访问与传输功能，将其结合为一个紧密集成、综合全面的Mashup产品。除了IBM Mashup Center之外，IBM还提供了IBM Web Spheres Mash。这是一种敏捷的动态脚本环境，允许开发人员使用PHP和groovy等可视化工具和动态脚本语言，构建和运行REST风格的组件。脚本开发人员可使用Web Spheres Mash迅速创建Widget，并使用IBM Mashup Center将其装配到新的Web应用程序。

支持Mashup工作流的每一步：（1）释放信息源；（2）创建动态Widget；（3）转换信息；（4）发现和共享资产；（5）迅速装配Mashup。

1.3 Google Map API

Google Maps的诞生标志着互联网地图服务的兴起，为互联网带来了易用的Google Maps API，在最大程度上方便Google地图技术和其他系统的整合应用。

Google Maps的特点：（1）地图操作性强。Google Maps的地图操作极为简单，配合鼠标实现移动、缩放；（2）地图预存。地图是预先处理存放在服务器端。当窗口发生移动、缩放等变化时，根据实际需要下载部分新的图片来填充，原地图无需重新下载；（3）实景呈现。地图可以百分百模拟呈现距离测量、路径分析等空间识别功能。特别在街景模式下，可以全视角漫游在虚拟的城市街道上；（4）低成本。提供的开源的API为用户使用，只要申请一个Key就能使用Google Maps，降低了二次开发成本，提高了用户参与开发的积极性；（5）数据实用性。Google Maps以矢量地图和高分辨率卫星影像两种数据源支持地图数据，并且由Google不定期进行地图更新，以满足现实数据的频繁变化。但由于受现实安全等因素影响，数据更新仍有一定延迟，但基本可以满足用户的基本开发需求。

基于Google Maps API的地图应用实现：（1）注册API Key。在Google网站上免费申请API，记录下页面中显示的API密钥，使用时将其中的my key替换成申请到的Key即可；（2）运用Google Maps API的GMap2创建新的地图对象，并利用setCenter类方法设定地图中心坐标实现地图相对准确的定位；（3）根据使用需求添加地图操作控件。成功地创建一幅地图后，用户可根据使用的需求在地图上添加一些控件，可以使用addControl（）方法来添加如水平移动和缩放工具、比例尺或是在矢量地图和卫星影像之间进行切换按钮的控件等。

1.4 数据库

通过Flickr API与Google Map AIP的混搭，实现在地图上搜索相关字后，从Flickr的服务器端获取照片信息，并显示在地图上。考虑到只需要建立一个flickr的服务器端代理，并且利用Google map API，通过Java Script的编码，形成一个简单的用户界面，在此上面进行搜索操作，实现图片在地图上的定位显示。于是将Flickr替换为自有数据库，通过搜索在库里获取照片

信息。

实现RIVER表扩展。通过三个表单的对应关系，逐层搜寻。其中，Image表中parents id对应RIVER表的主键，user表中的id对应Image表的user id。搜索时，通过对RIVER表的经纬度查询时，由主键对应parents id，从而在Image表获取图片链接位置，同样通过表中user id获取用户信息（这里只提供了用户名）。

2 系统设计及实现

系统采用VB.NET 2008作为网站开发平台。新建网站后，添加SqlDataSource、Lable、TextBox、Button、GridView等控件的引用，然后在对应的层

上添加相应控件。地图类型的转换由Google map提供的API直接

使用。

无论是Google Maps还是其他地图，其动态查询和定位功能给人以简洁、形象、直观的定位效果，为了模拟这些地图网站的查询和定位功能，本设计的实施思路如下：（1）制作按钮图片如等，并分别命名；（2）在查询按钮单击时调用函数，由搜索生成的数据在data.xml文件中以静态数据的方式列出来，然后通过JavaScript的编程调用，基于Google Map API的使用，实现查询信息（图片信息）在地图上显示出来。

3 页面的发布

用户通过开发工具需要上传或注册到Mashup Catalog才能被Lotus Mashups使用。这个步骤通过InfoSphere MashupHub的“上载窗口小部件”来完成。在MashupHub上传Widget，以url方式上传，url地址为部署到TOMCAT上的地址。填写相关信息，把Widget命名为GMap&F，上传到MashupHub列表中，点击GMap&F，即可看到操作选项。登录Lotus Mashups，选择添加至Mashup构建器，选择添加到演示，点击完成，打开Lotus Mashups，转入编辑，在页面的演示栏即可看到刚刚上传的GMap&F Widget，拖动到画布即可看显示效果。发布Mashup页面可以存入Mashup Catalog中，让其他用户来发现并重用它。

4 结语

地图Mashup是免费开源的二次开发，其具有很多优势，如开发形式简化、源码重新使用、数据来源丰富、开发成本低等，使得开发Web应用程序相对简单。借用Google Maps API，用户可以方便、快捷地创作出更多新颖实用的应用程序。相信在未来，地图Mashup将会衍生出更加多姿多彩的令人眼前一亮的应用于我们生活中，给我们带来更多愉快的体验。

参考文献

[1] 江宽，龚小鹏.Google API开发详解[M].北京：电子工业出版社，2008.

[2] 邢曙光，杨曦娥，刘超，等.基于Google maps API的地图Mashup[J].科技信息，2009，（34）.

[3] Google map API 文档 2007.

[4] 龙岳红.地图Mashup的研究与实现[D].中南大学，2008.

[5] AShanahan F，吴宏泉.Mashups Web2.0开发技术——基于Amazon.com[M].北京：清华大学出版社，2008.

[6] Mashups：Web应用程序新成员.2008.

[7] Mashup，带领我们进入一个全新的Web技术领域.2007.

[8] Duane Merrill Mashups Web应用程序新成员.2007.

作者简介：吴竞（1988-），男，安徽蚌埠人，广东达安项目管理股份有限公司助理工程师，研究方向：网络智能化。

（责任编辑：陈 洁）