張麟華

（太原工業(yè)學(xué)院計(jì)算機(jī)工程系，山西太原 030008）

多引擎地圖服務(wù)組件的開(kāi)發(fā)

張麟華

（太原工業(yè)學(xué)院計(jì)算機(jī)工程系，山西太原 030008）

文章著重介紹了多引擎地圖服務(wù)組件的整體設(shè)計(jì)，詳細(xì)描述了面對(duì)不同后臺(tái)代碼、不同數(shù)據(jù)庫(kù)、不同地圖服務(wù)時(shí)，數(shù)據(jù)如何轉(zhuǎn)換和存儲(chǔ)。并以谷歌地圖和51地圖為例展示了地圖服務(wù)API的調(diào)用方法，體現(xiàn)了谷歌地圖在衛(wèi)星圖片實(shí)景地圖方面的優(yōu)勢(shì)以及51地圖在公交導(dǎo)航方面的特色。具體設(shè)計(jì)中涉及了JavaScript、API引用、HTML等技術(shù)，尤其是對(duì)JavaScript中構(gòu)造對(duì)象、設(shè)置屬性、添加監(jiān)聽(tīng)器、事件服務(wù)等方面做了詳細(xì)的描述。

多引擎；地圖服務(wù)；JavaScript API

隨著谷歌對(duì)其地理信息服務(wù)的開(kāi)放，國(guó)內(nèi)的搜狗地圖、百度地圖、51地圖等地圖服務(wù)商也相繼開(kāi)放了應(yīng)用程序編程接口（以下簡(jiǎn)稱API）[1]，地圖服務(wù)已成為WEB開(kāi)發(fā)中的常見(jiàn)部分[2－3]。不同的網(wǎng)站、用戶會(huì)根據(jù)自己的需求選擇不同的地圖服務(wù)，但是單一的地圖服務(wù)總有一些缺點(diǎn)，本文介紹了一種多引擎地圖服務(wù)組件的開(kāi)發(fā)，力圖在一個(gè)組件中集成多種地圖服務(wù)。

1 軟件整體架構(gòu)

由于目前地圖服務(wù)均提供了主流的JavaScript API，故地圖控制的前臺(tái)腳本使用JavaScript，而數(shù)據(jù)庫(kù)可能采用Sql Server、Oracle等，后臺(tái)代碼可能采用JAVA、.NET、PHP等技術(shù)，所以后臺(tái)技術(shù)如何通過(guò)統(tǒng)一的形式將數(shù)據(jù)提供給前臺(tái)腳本成為了需要首先解決的問(wèn)題。

對(duì)比各種技術(shù)后，軟件采用了隱藏域作為數(shù)據(jù)中轉(zhuǎn)的方式。首先后臺(tái)程序?qū)⑺钄?shù)據(jù)按照約定格式組裝后存入隱藏域中，而后JavaScript腳本從隱藏域中取得數(shù)據(jù)后按照約定格式進(jìn)行解析[4－5]。數(shù)據(jù)按照“數(shù)據(jù)名：數(shù)據(jù)值”的形式獨(dú)立成組，各組數(shù)據(jù)間用“｜”分隔。如需提供一組經(jīng)緯度數(shù)據(jù)，經(jīng)度為116.41667，緯度為39.9116，打包后的數(shù)據(jù)為“l(fā)ongitude：116.41667｜latitude：39.9116”，將該字符串存入隱藏域后，JS腳本首先按照“｜”進(jìn)行分割，可得到兩個(gè)字符串“l(fā)ongitude：116.41667”和“l(fā)atitude：39.9116”，再分別按照“：”進(jìn)行分割后可得，longitude值為16.41667，latitude值為39.9116。軟件整體運(yùn)行如圖1所示。

圖1 軟件整體運(yùn)行圖

地圖引擎的切換，利用下拉列表和相關(guān)腳本即可解決。由于相關(guān)地圖功能較多，如標(biāo)注、路線、測(cè)距等，下文中以谷歌地圖的顯示、標(biāo)記和51地圖的路線查詢?yōu)槔?，其他如搜狗地圖、百度地圖的功能實(shí)現(xiàn)，這里不再贅述。

2 集成谷歌地圖

Google Maps API是Google為開(kāi)發(fā)者提供的地圖編程API，是一項(xiàng)免費(fèi)的服務(wù)，任何非盈利性網(wǎng)站均可使用。它允許開(kāi)發(fā)者在不必建立自己的地圖服務(wù)器的情況下，將Google Maps地圖數(shù)據(jù)嵌入到網(wǎng)站之中，從而實(shí)現(xiàn)嵌入Google Maps的地圖服務(wù)應(yīng)用，并借助Google Maps的地圖數(shù)據(jù)為用戶提供位置服務(wù)。

以下介紹調(diào)用Google Maps API來(lái)顯示地圖以及添加標(biāo)記的基本方法[6]。

2.1 顯示地圖基本方法

（1）載入Google Maps API。代碼為〈script type＝" text/javascript"src＝"http：//maps.google.com/maps/api/ js?sensor＝set_to_true_or_false"〉 〈/script〉

該引用將載入使用第3版Google Maps API所需的全部符號(hào)和定義。

（2）添加地圖DOM元素。要在網(wǎng)頁(yè)上顯示地圖，必須為其留出一個(gè)位置。通常的做法是創(chuàng)建一個(gè)層，然后在瀏覽器的文檔對(duì)象模型中獲取此元素的引用。

這里的id非常重要，需和JS腳本相對(duì)應(yīng)。

（3）設(shè)置地圖。首先需要?jiǎng)?chuàng)建一個(gè)包含地圖初始化變量的Map options對(duì)象。由于要將地圖的中心設(shè)定為某一特定的點(diǎn)，因此還需要?jiǎng)?chuàng)建一個(gè)latlng值，以保存此位置信息并將其傳遞到地圖的選項(xiàng)中。代碼如下。

function initialize（）{

var latlng＝new google.maps.LatLng（37.95732，112.536574）；//存儲(chǔ)地圖中心經(jīng)緯度

（4）載入地圖。利用〈body onload＝"initialize（）"〉，調(diào)用定義好的函數(shù)initialize（）。這時(shí)打開(kāi)網(wǎng)頁(yè)，便會(huì)顯示出相應(yīng)的地圖。

2.2 添加標(biāo)記基本方法

標(biāo)記用于標(biāo)識(shí)地圖上的位置。默認(rèn)情況下，標(biāo)記使用的是標(biāo)準(zhǔn)圖標(biāo)，但也可以在標(biāo)記的構(gòu)造函數(shù)中設(shè)置一個(gè)自定義圖標(biāo)。google.maps.Marker構(gòu)造函數(shù)采用的是用于指定標(biāo)記初始屬性的一個(gè)Marker options對(duì)象常量。

var myLatlng＝new google.maps.LatLng（37.95733，112.537674）； varmarker＝new google.maps.Marker（{

運(yùn)行后，可以在地圖對(duì)應(yīng)位置找到該標(biāo)記。

3 集成51地圖

51地圖是北京靈圖軟件技術(shù)有限公司所開(kāi)發(fā)的，該地圖開(kāi)放的API中，除了提供基本的地圖顯示、標(biāo)注等功能外，還提供了谷歌地圖未提供的公交查詢功能，本節(jié)便詳細(xì)介紹如何利用51地圖實(shí)現(xiàn)公交換乘的查詢[7－8]。

（1）構(gòu)造DOM元素。需要構(gòu)造map_canvas作為地圖顯示的層，sInput和eInput兩個(gè)文本框用來(lái)存放起點(diǎn)和終點(diǎn)的信息，rList作為存放公交換乘方案文字信息的列表框。

（2）初始化地圖。

（3）查詢換乘方案。調(diào)用getRoutesByPoint（sPoint，ePoint）方法，通過(guò)起點(diǎn)sPoint和終點(diǎn)ePoint的坐標(biāo)進(jìn)行查詢，返回LTBusRoutesResult類型的結(jié)果，其中包括換乘方案結(jié)果集，而換乘方案中又包括換乘線路信息、步行距離等信息。

（4）由于添加了監(jiān)聽(tīng)器，當(dāng)綁定公交換乘方案信息加載后，自動(dòng)調(diào)用routesLoaded函數(shù)，依據(jù)查詢出的換乘方案集合中的數(shù)據(jù)，將換乘信息以文本顯示在列表框中。

//此處遍歷公交換乘方案，具體代碼省略

}

initSelect（）；

//初始默認(rèn)select選擇第一個(gè)方案

}

else{//若方案集合為空

//顯示提示信息，具體代碼省略}

}

（5）用戶在列表框中選擇換乘方案后，在地圖上顯示此換乘方案的對(duì)應(yīng)路線。效果如圖2所示。function onSelectChange（select）

{ //select參數(shù)為用戶操作的列表框

if（select.selected Index〈0｜｜$（select）.val（）＝＝＝＇-1＇）{return；}

//若選擇為空，結(jié)束

//根據(jù)用戶選擇，構(gòu)造換乘方案對(duì)象，具體代碼省略

bus.getRouteDetail（route）； //通過(guò)換乘方案對(duì)象獲取此換乘方案的詳細(xì)信息，這將觸發(fā)地圖繪制過(guò)程

}

圖2 51地圖公交換乘圖形顯示

4 結(jié)論

文章著重介紹了多引擎地圖服務(wù)組件的整體設(shè)計(jì)，并以谷歌地圖和51地圖為例展示了地圖服務(wù)API的調(diào)用方法，體現(xiàn)了谷歌地圖在衛(wèi)星圖片實(shí)景地圖方面的優(yōu)勢(shì)以及51地圖在公交導(dǎo)航方面的特色。實(shí)踐證明，多引擎地圖服務(wù)組件能夠集成多種地圖服務(wù)，使用戶可以根據(jù)功能需求進(jìn)行不同的選擇，效果良好。

[1]李艷.基于地圖API的Web地圖服務(wù)及應(yīng)用研究[J].地理信息世界，2010（2）：54-57.

[2]張大鵬.開(kāi)源WebGIS軟件應(yīng)用開(kāi)發(fā)技術(shù)和方法研究[J].測(cè)繪科學(xué)，2011（5）：193-196.

[3]張振濤.關(guān)于WebGIS關(guān)鍵技術(shù)與發(fā)展趨勢(shì)的探討[J].科技信息，2011（14）：228-229.

[4]弗拉納根.Javascript權(quán)威指南[M].北京：機(jī)械工業(yè)出版社，2007.

[5]內(nèi)格里諾.JavaScript基礎(chǔ)教程[M].北京：人民郵電出版社，2009.

[6]谷歌公司.Maps API系列-Google代碼[EB/OL].（2010-07-03）[2011-01-05].http：//code.google.com/intl/zh-CN/apis/maps/index.htm l.

[7]北京靈圖軟件技術(shù)有限公司.51地圖API介紹[EB/OL].（2010-10-13）[2011-05-06].http：//api.51ditu.com/special/index.htm l.

[8]北京靈圖軟件技術(shù)有限公司.51地圖公交換乘方案查詢范例[EB/OL].（2009-10-30）[2010-09-20].http：//api.51ditu.com/docs/ bus/examples/LTRouteLine/GetRouteLine.htm l.

The Development of Multi-engine Map Service Components

ZHANG Lin-hua
（Departmentof Computer Engineering，Taiyuan Institute of Technology，Taiyuan Shanxi，030008）

This a rticle focusesmainly on overall design ofmulti-enginemap services components，describes detailed data conversion and storage facing different background code，different databases and differentmap services.Taking Google Maps and 51 Maps for example，shows how to call APIand advantages of Google Maps in satellite real-image and 51map in bus navigation.Specific design involves JavaScript，API reference，HTML and other technologies，especially describes construction objects in JavaScript，setting attributes，adding listener，event services.

m ulti-engine；m ap s ervice；JavaScript API〔責(zé)任編輯 高?！?/p>

TP319

A

1674－0874（2012）02－0003－03

2011-02-28

張麟華（1982-），男，山西太原人，碩士，講師，研究方向：計(jì)算機(jī)應(yīng)用軟件。