如何混搭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等控件的引用，然后在對應的層