摘要：混搭是指“將多個(gè)來(lái)源內(nèi)容無(wú)縫組合成一個(gè)集成體驗(yàn)”的Web應(yīng)用。通過(guò)獲取來(lái)自不同Web站點(diǎn)的內(nèi)容，并將其置于的集成界面或程序加以應(yīng)用。文章是基于Google Maps的混搭：目標(biāo)幫助用戶(hù)搜索自有數(shù)據(jù)庫(kù)中帶有地理標(biāo)簽的Flickr照片并使它在某張Google地圖上響應(yīng)，再點(diǎn)擊時(shí)顯示各圖的詳細(xì)信息等。

關(guān)鍵詞：Google Maps；Flickr用戶(hù)圖片；mashup；Web站點(diǎn)；混搭 文獻(xiàn)標(biāo)識(shí)碼：A

中圖分類(lèi)號(hào)：TP393 文章編號(hào)：1009-2374（2016）06-0064-02 DOI：10.13535/j.cnki.11-4406/n.2016.06.032

1 概述

混搭是當(dāng)今的熱點(diǎn)主題之一，它能使你成為一項(xiàng)共同事業(yè)或活動(dòng)中的一份子。看到那些熟悉的事物放到一起，創(chuàng)造出新的，超出簡(jiǎn)單相加的結(jié)果，令人相當(dāng)愉快。混搭是非常強(qiáng)大的，可以令我們事半功倍。也許并不會(huì)永遠(yuǎn)都用到，但總可以不需要投入過(guò)多的精力從中獲得自己需要的東西。

1.1 選題的意義

基于Google Maps的混搭幫助用戶(hù)搜索自有數(shù)據(jù)庫(kù)中帶有地理標(biāo)簽的Flickr照片并使它在某張Google地圖上響應(yīng)，再點(diǎn)擊時(shí)顯示各圖的詳細(xì)信息等。具體可提供開(kāi)源的API，給旅游公司或景點(diǎn)提供游客平臺(tái)，實(shí)現(xiàn)“游后”增值互動(dòng)服務(wù)。

1.2 混搭Mashup

Mashup即Web應(yīng)用混搭技術(shù)，是利用開(kāi)源網(wǎng)站的API和工具進(jìn)行自定義搭配來(lái)制作出獨(dú)特的、具有個(gè)體創(chuàng)意性的Web應(yīng)用的一種技術(shù)。其精髓在于提供新的服務(wù)，從組合中獲取新的價(jià)值。典型的Mashup會(huì)使用Web上的數(shù)據(jù)，并圍繞一個(gè)特定的主題來(lái)組織。

網(wǎng)絡(luò)地圖通常邀請(qǐng)用戶(hù)在地圖上填充資料，為電子地圖添加圖標(biāo)同時(shí)加入一些獨(dú)立信息。地圖Mashup則會(huì)自動(dòng)結(jié)合至少一個(gè)數(shù)據(jù)源使之成為一張新的地圖，它起源于互聯(lián)網(wǎng)，用Google Map、Yahoo Map等作為平臺(tái)，利用一系列API和數(shù)據(jù)庫(kù)接口來(lái)創(chuàng)建新的專(zhuān)屬性地圖，在一定程度減輕了一張地圖上的所有類(lèi)型數(shù)據(jù)的負(fù)擔(dān)。

Mashup通常由三個(gè)部分組成：數(shù)據(jù)提供者、Mashup站點(diǎn)和客戶(hù)瀏覽器，來(lái)自客戶(hù)瀏覽器的請(qǐng)求傳向Mashup站點(diǎn)所在的web服務(wù)器。請(qǐng)求的頁(yè)面包括HTML和JavaScript，由JavaScript在調(diào)用一個(gè)或多個(gè)數(shù)據(jù)提供者的API服務(wù)后，按照邏輯進(jìn)行組合并在客戶(hù)瀏覽器中

顯示。

IBM Mashup Center是一種易于使用的Mashup平臺(tái)，支持動(dòng)態(tài)環(huán)境應(yīng)用程序的業(yè)務(wù)線裝配，提供了管理、安全和治理功能。IBM Mashup Center結(jié)合了來(lái)自IBM Lotus Mashups的直觀用戶(hù)Mashup功能和IBM InfoSphere Mashup Hub的信息訪問(wèn)與傳輸功能，將其結(jié)合為一個(gè)緊密集成、綜合全面的Mashup產(chǎn)品。除了IBM Mashup Center之外，IBM還提供了IBM Web Spheres Mash。這是一種敏捷的動(dòng)態(tài)腳本環(huán)境，允許開(kāi)發(fā)人員使用PHP和groovy等可視化工具和動(dòng)態(tài)腳本語(yǔ)言，構(gòu)建和運(yùn)行REST風(fēng)格的組件。腳本開(kāi)發(fā)人員可使用Web Spheres Mash迅速創(chuàng)建Widget，并使用IBM Mashup Center將其裝配到新的Web應(yīng)用程序。

支持Mashup工作流的每一步：（1）釋放信息源；（2）創(chuàng)建動(dòng)態(tài)Widget；（3）轉(zhuǎn)換信息；（4）發(fā)現(xiàn)和共享資產(chǎn)；（5）迅速裝配Mashup。

1.3 Google Map API

Google Maps的誕生標(biāo)志著互聯(lián)網(wǎng)地圖服務(wù)的興起，為互聯(lián)網(wǎng)帶來(lái)了易用的Google Maps API，在最大程度上方便Google地圖技術(shù)和其他系統(tǒng)的整合應(yīng)用。

Google Maps的特點(diǎn)：（1）地圖操作性強(qiáng)。Google Maps的地圖操作極為簡(jiǎn)單，配合鼠標(biāo)實(shí)現(xiàn)移動(dòng)、縮放；（2）地圖預(yù)存。地圖是預(yù)先處理存放在服務(wù)器端。當(dāng)窗口發(fā)生移動(dòng)、縮放等變化時(shí)，根據(jù)實(shí)際需要下載部分新的圖片來(lái)填充，原地圖無(wú)需重新下載；（3）實(shí)景呈現(xiàn)。地圖可以百分百模擬呈現(xiàn)距離測(cè)量、路徑分析等空間識(shí)別功能。特別在街景模式下，可以全視角漫游在虛擬的城市街道上；（4）低成本。提供的開(kāi)源的API為用戶(hù)使用，只要申請(qǐng)一個(gè)Key就能使用Google Maps，降低了二次開(kāi)發(fā)成本，提高了用戶(hù)參與開(kāi)發(fā)的積極性；（5）數(shù)據(jù)實(shí)用性。Google Maps以矢量地圖和高分辨率衛(wèi)星影像兩種數(shù)據(jù)源支持地圖數(shù)據(jù)，并且由Google不定期進(jìn)行地圖更新，以滿足現(xiàn)實(shí)數(shù)據(jù)的頻繁變化。但由于受現(xiàn)實(shí)安全等因素影響，數(shù)據(jù)更新仍有一定延遲，但基本可以滿足用戶(hù)的基本開(kāi)發(fā)需求。

基于Google Maps API的地圖應(yīng)用實(shí)現(xiàn)：（1）注冊(cè)API Key。在Google網(wǎng)站上免費(fèi)申請(qǐng)API，記錄下頁(yè)面中顯示的API密鑰，使用時(shí)將其中的my key替換成申請(qǐng)到的Key即可；（2）運(yùn)用Google Maps API的GMap2創(chuàng)建新的地圖對(duì)象，并利用setCenter類(lèi)方法設(shè)定地圖中心坐標(biāo)實(shí)現(xiàn)地圖相對(duì)準(zhǔn)確的定位；（3）根據(jù)使用需求添加地圖操作控件。成功地創(chuàng)建一幅地圖后，用戶(hù)可根據(jù)使用的需求在地圖上添加一些控件，可以使用addControl（）方法來(lái)添加如水平移動(dòng)和縮放工具、比例尺或是在矢量地圖和衛(wèi)星影像之間進(jìn)行切換按鈕的控件等。

1.4 數(shù)據(jù)庫(kù)

通過(guò)Flickr API與Google Map AIP的混搭，實(shí)現(xiàn)在地圖上搜索相關(guān)字后，從Flickr的服務(wù)器端獲取照片信息，并顯示在地圖上?？紤]到只需要建立一個(gè)flickr的服務(wù)器端代理，并且利用Google map API，通過(guò)Java Script的編碼，形成一個(gè)簡(jiǎn)單的用戶(hù)界面，在此上面進(jìn)行搜索操作，實(shí)現(xiàn)圖片在地圖上的定位顯示。于是將Flickr替換為自有數(shù)據(jù)庫(kù)，通過(guò)搜索在庫(kù)里獲取照片

信息。

實(shí)現(xiàn)RIVER表擴(kuò)展。通過(guò)三個(gè)表單的對(duì)應(yīng)關(guān)系，逐層搜尋。其中，Image表中parents id對(duì)應(yīng)RIVER表的主鍵，user表中的id對(duì)應(yīng)Image表的user id。搜索時(shí)，通過(guò)對(duì)RIVER表的經(jīng)緯度查詢(xún)時(shí)，由主鍵對(duì)應(yīng)parents id，從而在Image表獲取圖片鏈接位置，同樣通過(guò)表中user id獲取用戶(hù)信息（這里只提供了用戶(hù)名）。

2 系統(tǒng)設(shè)計(jì)及實(shí)現(xiàn)

系統(tǒng)采用VB.NET 2008作為網(wǎng)站開(kāi)發(fā)平臺(tái)。新建網(wǎng)站后，添加SqlDataSource、Lable、TextBox、Button、GridView等控件的引用，然后在對(duì)應(yīng)的層