這個(gè)WebMap的引擎實(shí)則我早就(2006年初)分享過(guò)了，只是當時(shí)也沒(méi)有人注意。08年的時(shí)候，我還用這個(gè)引擎為別人做過(guò)項目，只是當時(shí)付了我八成的費用后一拖再拖就不了了之了，后來(lái)再回頭找到我的時(shí)候我也不搭理他們了。時(shí)過(guò)境遷，又是三個(gè)年頭(11年都快結束了)過(guò)去了，今天在移動(dòng)硬盤(pán)里竟然無(wú)意看到了這個(gè)當年的項目，簡(jiǎn)單的看了一下代碼，竟然還能用，加上文檔比較健全，所以簡(jiǎn)單整理一下后打包分享給大家。

這個(gè)WebMap引擎實(shí)際上是MapBar早年的引擎，當年寫(xiě)出這樣的引擎來(lái)應該說(shuō)是非常牛的，現在看來(lái)也許已經(jīng)不怎么先進(jìn)了，而且現在MapBar的技術(shù)也應該進(jìn)步了不少，Baidu的地圖應該有MapBar不小的功勞。這個(gè)引擎基本上能夠滿(mǎn)足我們基本的需求，更高級的能夠實(shí)現像Google的或者Baidu式的開(kāi)放API引擎差距不小，性能和規范性不佳，但作為項目作為簡(jiǎn)單的研究和應用應該是足夠的。具體的來(lái)看，有以下幾大功能：

常用功能：放大、縮小、拉框放大、拉框縮小、移動(dòng)、測距
通過(guò)經(jīng)緯度添加Point
設置地圖中心、獲取地圖中心
移除地圖上所有對象
設置地圖層級、獲得地圖當前層級
地圖自動(dòng)縮放至經(jīng)緯度區域范圍
在地圖上手動(dòng)標注一個(gè)Point
拉框查看所拉框矩形的范圍并回調callback函數
顯示line

我做了一個(gè)Demo，可以訪(fǎng)問(wèn)     查看實(shí)際效果，也可以看我提供的截圖：

基于以上的功能，結合起來(lái)使用則可以實(shí)現更多的應用(文檔中有具體實(shí)例分析)。

文件我已經(jīng)全部打包，下載地址：http://sharesh.googlecode.com/files/WebMapEngine_MapBar.zip，歡迎大家下載使用，歡迎分享交流并改進(jìn)。

詳細說(shuō)明如下(以下內容已經(jīng)保存到壓縮包的word文檔中)：

此內容需要更改為：

 

3，在

下需要增加

此部分為VML支持

題外話(huà)：由于CSS和JS文件均采用UTF-8編碼，所以建議將頁(yè)面語(yǔ)言也設置為UTF-8編碼，否則會(huì )造成顯示不正常。如果改用GB2312等編碼，則需要打開(kāi)所有CSS和JS文件并另存為相應編碼格式的文件才能調用。相關(guān)網(wǎng)頁(yè)語(yǔ)言定義如下：

 

 

 

 

4，插入CSS和JS

 

 

graphics.js文件由于在include.js文件中嵌入，所以不需要在此處插入。

?。?！5.顯示地圖(調用地圖引擎顯示地圖)

在body的任意處加入如下JS代碼

<script language=javascript>

var maplet = new AVMaplet(39.90894606, 116.368281, 4, 600, 480,0,0,"/images/marker.gif","baidu");

maplet.showMap();

script>

釋義：script中共兩行代碼，意義如下：

第一行定義maplet為一個(gè)新的對象AVMaplet；

第二行為地圖顯示，即初始化地圖；

AVMaplet(lat, lon, zoomLevel, width, height, top, left, defaultMarkImage, style);

其中

Lat：緯度，數字

Lon：經(jīng)度，數字

ZoomLevel：縮放級別，數字。(注意：此處初始化縮放級別如果超過(guò)最大縮放級別，則地圖引擎無(wú)法顯示。此處最大縮放級別為7，總共為8級，包括0級)

Width：地圖寬度，數字，單位為像素

Height：地圖高度，數字，單位為像素

Top：相對于body上層的寬度，數字，單位為像素，建議數字為0

Left：相對于body左側的寬度，數字，單位為像素，建議數字為0

說(shuō)明：由于地圖DIV框架的position設置為absolute，所以整個(gè)地圖DIV游離于body之中，需要使用Top和Left定位。而正由于此原因，建議數字為0，并使用iframe框架設計，而非頁(yè)面直接調用地圖引擎。

DefaultMarkImage：默認地圖標注圖片，文字，此處意義不大，建議設置為一個(gè)存在的默認標注圖片即可。

Style：地圖樣式，文字，此處必須設置為baidu。此樣式的本意是對于不同的合作伙伴提供不同的地圖畫(huà)面樣式，但MapBar和百度合作后就再也沒(méi)有變動(dòng)過(guò)地圖樣式，可能是百度作為大客戶(hù)的原因吧。此處樣式必須設置為baidu，不然無(wú)法調用遠程MapBar服務(wù)器上的圖片。

至此，一個(gè)顯示地圖的頁(yè)面就完成了，將文件保存為html文件即可。

由于上述原因的限制，強烈建議使用iframe嵌套以上的html文件來(lái)調用地圖引擎，而不采用單獨頁(yè)面直接調用的模式。

以上內容的相應代碼請參考map.htm文件。

 

Iframe框架調用說(shuō)明：如果使用iframe框架調用，則首先需要為iframe定義一個(gè)id，建議增加定義一個(gè)name，border建議設置為0，scrollbar等建議設置為無(wú)，width和height設置為地圖對象的width和height，這樣就可以無(wú)縫顯示在網(wǎng)頁(yè)中。建議在iframe外在包一個(gè)div，并將div的width和height設置同上，此處有利于定位。

 

三，WEBMAP引擎函數列表

根據上述即可開(kāi)始使用地圖引擎，那么如何對地圖進(jìn)行操作呢，請見(jiàn)函數列表：

(根據第二部分的假定，我們已經(jīng)在body中創(chuàng )建了一個(gè)AVMaplet，那么下面的函數涉及到的是對該object的操作)

1，object. showMap()

功能：初始化地圖

說(shuō)明：此函數需要緊跟object定義后立即執行，整個(gè)地圖引擎中只調用一次。

2，object. addPoint(strIcon, dLat, dLon, strLabel, strInfo, bLabelOn)

功能：增加一個(gè)Point。該point帶有標題和文字的氣泡框。

說(shuō)明：

strIcon：point顯示的圖片，string

dLat：緯度，double

dLon：經(jīng)度，double

strLabel：標題，string

strInfo：內容，string。支持HTML語(yǔ)法

bLabelOn：是否顯示標題。1為顯示，其余為不顯示。在沒(méi)有特殊情況下，建議不顯示標題。對于大量的point建議不顯示標題。

3，object. addPoint2(strIcon, strLatLon, strLabel, strInfo, bLabelOn)

功能：增加一個(gè)point，同上。

說(shuō)明：

strLatLon：加密后的經(jīng)緯度坐標值。

此函數同addPoint函數的差別在于坐標的使用，此函數使用加密后的文字坐標，其余無(wú)任何差異。

4，object. setCenter(dLat,dLon)

功能：將地圖中心設置為指定坐標位置。

說(shuō)明：

dLat：緯度，double

dLon：經(jīng)度，double

5，object.clean()

功能：清除地圖中的所有對象，即所有的point、line和polygon。

說(shuō)明：此函數主要用于一批新的對象建立前。比如新建一次查詢(xún)，一般則需要清除地圖中所有對象后再將結果對象顯示到地圖中。

6，strZoomLevel = object. getZoomLevel()

功能：獲取當前地圖的縮放級別

說(shuō)明：此函數返回縮放級別的字符，比如4級則返回4。

7，object. setZoomLevel(zm)

功能：設置地圖縮放級別

說(shuō)明：

zm：縮放級別，int。

注意，地圖中的縮放級別是從0級開(kāi)始的，在使用過(guò)程中注意不要超過(guò)最大縮放級別數。

8，object. zoomIn()

功能：放大，將當前地圖縮放級別增加一級。

說(shuō)明：此功能和縮放控制條中的+按鈕功能完全一致。

9，object. zoomOut()

功能：縮小，將當前地圖縮放級別縮小一級。

說(shuō)明：此功能和縮放控制條中的-按鈕功能完全一致。

10，object. setAutoZoom(minLat, minLon, maxLat, maxLon)

功能：根據最小和最大經(jīng)緯度坐標值自動(dòng)設置縮放級別

說(shuō)明：

minLat：最小緯度

minLon：最小經(jīng)度

maxLat：最大緯度

maxLon：最大經(jīng)度

11，object. addPolylineString(strStyle,strLine)

功能：增加一條線(xiàn)段

說(shuō)明：

strStyle：線(xiàn)條樣式，string。樣式共有三部分組成，由逗號隔開(kāi)，比如“4,0,#0000FF”

，其中，4表示線(xiàn)條寬度，0為外包邊，#0000FF表示線(xiàn)條顏色。

12，object. refresh ()

功能：刷新地圖頁(yè)面

說(shuō)明：此處在對地圖進(jìn)行某些操作后，刷新地圖讓效果立即顯示。比如添加線(xiàn)條后不能立即顯示線(xiàn)條，則需要本函數，但在很多情況下此函數自動(dòng)包含，比如設置縮放級別的函數中就自帶了刷新功能。

?。?！13，object. setMode(toolnum)

功能：設置地圖中的鼠標功能，比如放大、縮小、漫游(平移)、拉框查詢(xún)、標注等。鼠標一般默認狀態(tài)為漫游狀態(tài)。

說(shuō)明：

toolnum：模式參數，int，參數為1/2/3/5/6/11共6種模式。其中：

1：拉框放大

2：拉框縮小

3：漫游(平移)，鼠標默認狀態(tài)

5：拉框查詢(xún)

6：標注點(diǎn)，Mark

11：測距。同控制條上的測距功能完全一致。

注意，拉框放大和拉框縮小如果需要使用則必須將漫游功能顯示，不然將無(wú)法返回到漫游狀態(tài)。拉框查詢(xún)和標注點(diǎn)功能完成后建議設置返回漫游狀態(tài)。測距功能完成后自動(dòng)返回到漫游狀態(tài)。

拉框查詢(xún)和標注點(diǎn)功能需要結合callback函數一起使用，默認狀態(tài)下拉框查詢(xún)和標注點(diǎn)只返回一段字符串，字符串格式如下：

拉框查詢(xún)返回字符串：&act=lookup&ctr=strLatLon&size=Width,Height&range=Left1,Top1,Left2,Top2&zm=ZoomLevel

標注點(diǎn)返回字符串：&act=add&latlon=strLatLon&zm=ZoomLevel

字符串中使用&將各個(gè)參數串聯(lián)起來(lái)，并且每個(gè)參數所對應的值使用=隔開(kāi)。需要對此字符串自行解析。參數說(shuō)明如下

act：動(dòng)作，固定值，用于區分動(dòng)作，lookup表示拉框查找，add表示標注點(diǎn)

ctr：地圖中心坐標，加密后坐標值

size：地圖大小，返回寬和高，使用逗號分隔開(kāi)

range：拉框大小，返回起點(diǎn)定位和終點(diǎn)定位，即矩形的兩個(gè)對角，共返回四個(gè)值，使用逗號隔開(kāi)，分別為起點(diǎn)相對于地圖的左邊距和上邊距、終點(diǎn)相對于地圖的左邊距和上邊距。特別說(shuō)明，左邊距和上邊距需要比對后才能確定起點(diǎn)還是終點(diǎn)的邊距大，并以此推算出拉框的最小和最大經(jīng)緯度。

zm：縮放級別，返回縮放級別數值

latlon：標注點(diǎn)的坐標位置，加密后坐標值

特別注意，此callback函數僅僅返回地圖中的信息，不做任何其他處理，建議結合Form或者外部頁(yè)面共同使用來(lái)完成信息提交、查詢(xún)等功能。比如將callback函數返回的參數值傳遞給Form中的hideInput。

14，dLatLon = b.p(strLatLon)

功能：解密函數，將文字坐標解密成經(jīng)緯度坐標

說(shuō)明：

strLatLon：文字坐標

解密后得到的結果為數組，dLatLon[1]為緯度，dLatLon[0]為經(jīng)度

15，strLatLon = jiami(dLat,dLon)

功能：將數字經(jīng)緯度坐標加密成文字坐標，即b.p函數的反函數。

說(shuō)明：

dLat：緯度，double

dLon：經(jīng)度，double

加密后得到的結果為字符串

注意，本函數為了方便使用特意提取成單獨的函數。

 

四，WEBMAP引擎使用實(shí)例(以房源地圖為例)

首先我們假定地圖引擎已經(jīng)成功嵌入并成功顯示

1，價(jià)格查詢(xún)

功能描述：在地圖上劃取一個(gè)矩形，計算該矩形內房源的平均價(jià)格

解決方法：

頁(yè)面中一個(gè)Form用于提交數據，四個(gè)textInput(建議hiden)用于獲取最小和最大經(jīng)緯度，一個(gè)Button用于設置地圖鼠標狀態(tài)并在callback函數中返回最小和最大經(jīng)緯度。甚至可以一步到位在callback函數中直接提交給動(dòng)態(tài)頁(yè)面進(jìn)行查詢(xún)，并最終由動(dòng)態(tài)頁(yè)面生成結果。

地圖引擎的關(guān)鍵在于提供拉框返回的最小和最大經(jīng)緯度，功能集中于Button，設置button的onclick事件為：object. setMode(5)，當button被按下后改變地圖引擎中的鼠標狀態(tài)為拉框查詢(xún)，在地圖中進(jìn)行拉框查詢(xún)后返回callback函數，callback函數解析后返回最小和最大經(jīng)緯度。

2，房源標注

功能描述：在地圖上顯示某個(gè)房源的位置

解決方法：

頁(yè)面中一個(gè)Form用于提交數據，兩個(gè)textInput用于獲取標注點(diǎn)的經(jīng)緯度，一個(gè)button用于設置鼠標狀態(tài)并在callback函數中返回經(jīng)緯度。

地圖引擎的關(guān)鍵在于提供標注點(diǎn)的經(jīng)緯度，功能集中于button，設置button的onclick時(shí)間為：object. setMode(6)，當button被按下后改變地圖引擎中的鼠標狀態(tài)為標注點(diǎn)，在地圖中單擊后返回callback函數，callback函數解析出坐標后返回經(jīng)緯度。

3，劃圖找房

功能描述：在地圖上劃取一個(gè)矩形，選擇查詢(xún)條件，查詢(xún)矩形內滿(mǎn)足查詢(xún)條件的房源以列表形式顯示。在地圖上標注房屋位置。

解決方法：同第一條，涉及屬性條件查詢(xún)請使用動(dòng)態(tài)語(yǔ)言解決。

4，公交線(xiàn)路找房

功能描述：查詢(xún)某一條公交、地鐵線(xiàn)路站點(diǎn)周邊1Km內滿(mǎn)足查詢(xún)條件的租賃房源以列表形勢顯示。在地圖上標注房屋位置，當鼠標移動(dòng)到房屋位置時(shí)顯示乘車(chē)線(xiàn)路。

解決方法：

共分為兩步，第一步查找公交線(xiàn)路并顯示公交站點(diǎn)，第二步在公交站點(diǎn)附近查找房源。

查找公交線(xiàn)路并顯示公交站點(diǎn)：使用一個(gè)input和一個(gè)button，input中為公交線(xiàn)路查詢(xún)關(guān)鍵字，button為Form的提交查詢(xún)功能。查詢(xún)完成顯示線(xiàn)路結果，在點(diǎn)擊線(xiàn)路的時(shí)候動(dòng)態(tài)語(yǔ)言觸發(fā)再次查詢(xún)，即查詢(xún)該線(xiàn)路的公交站點(diǎn)和公交線(xiàn)路的坐標，查詢(xún)完成顯示結果的時(shí)候，需要加入javascript來(lái)操作地圖，主要的函數有addPoint函數和addPolylineString函數，用于顯示公交站點(diǎn)和公交線(xiàn)路，由于addPoint中有標題和內容之分，內容支持HTML，所以建議站名作為標題，在內容中加入查詢(xún)附近房源功能按鈕以備第二步使用。同時(shí)建議動(dòng)態(tài)語(yǔ)言計算出公交線(xiàn)路的最小和最大經(jīng)緯度，使用setAutoZoom函數將地圖縮放至合適的縮放比例。

查找公交站點(diǎn)附近房源：在氣泡框中放入距離下拉框和button，和兩個(gè)隱性input，兩個(gè)隱性input為第一步中傳遞的該站點(diǎn)的經(jīng)緯度，距離下拉框為一公里、兩公里等的距離選擇，由于1經(jīng)緯度等于111公里，所以一公里約為0.009度，只需要根據公交站的坐標位置減去和加上0.009度，即得到了最小和最大經(jīng)緯度的方框，再根據此框使用動(dòng)態(tài)語(yǔ)言查詢(xún)，方法同一。此處重點(diǎn)在于根據點(diǎn)位置設計出一個(gè)矩形框再進(jìn)行查詢(xún)。

5，目的地找房

功能描述：在地圖上點(diǎn)取一個(gè)點(diǎn)，查詢(xún)該點(diǎn)周?chē)?/font>500M內所有經(jīng)過(guò)的公交、地鐵線(xiàn)路，并查詢(xún)這些線(xiàn)路站點(diǎn)周邊1Km內滿(mǎn)足查詢(xún)條件的租賃房源以列表形勢顯示。在地圖上標注房屋位置，當鼠標移動(dòng)到房屋位置時(shí)顯示乘車(chē)線(xiàn)路。

解決方法：

同第4條中的第二步，差別在于此處的點(diǎn)位置由標注點(diǎn)功能產(chǎn)生。

6，公交線(xiàn)路添加、修改、刪除

解決方法：

由于公交線(xiàn)路數據為外部抓取，建議使用數據庫導入。

7，地點(diǎn)經(jīng)緯度添加、修改、刪除

解決方法：

添加同第2條。修改和刪除為動(dòng)態(tài)語(yǔ)言操作數據庫。

 

五，MapPicURLlist工具的使用

MapPicURLlist工具主要功能為在固定經(jīng)緯度范圍內的圖片URL list出來(lái)，并保存成文件。旨在解決離線(xiàn)或者局域網(wǎng)內使用WEBmap引擎問(wèn)題。

如上圖所示，圖片URL地址建議保持不變，此為瓦片的默認原始路徑，輸入最大最小經(jīng)緯度值，選擇好層級，點(diǎn)擊PNGlist，則自動(dòng)list出所有該層級、經(jīng)緯度范圍下的圖片URL列表，然后點(diǎn)擊FileSave則自動(dòng)生成PNGFileList13.txt文件，其中數字13為你設置的層級。

本工具僅為輔助工具，僅list出圖片的URL，若需要本地離線(xiàn)使用地圖，則需要將保存后的URL列表通過(guò)其他下載工具(如迅雷)下載下來(lái)，并按照原有路徑保存。

 

 

六， FAQ

1，如何修改右下角文字和鏈接

Include.js文件中查找關(guān)鍵字“MapBar&ShareSh”和“http://sharesh.cn”即可

文字內容為：var WY9Xv=’©MapBar&ShareSh ‘;，將藍色內容改成自己的內容即可。

鏈接內容為：window.open("http://sharesh.cn");，將藍色內容改成自己的鏈接即可。

2，控制條、比例尺、版權鏈接的隱藏

Include.js文件中查找以下關(guān)鍵字

隱藏左上角控制條：this.lC8O6=true;  將true設置為false即可；

隱藏左下角比例尺：this.Q1E=true;  將true設置為false即可；

隱藏右下角版權鏈接：this.v2a2=true;  將true設置為false即可；

3，如何實(shí)現地圖的本地訪(fǎng)問(wèn)

如上所述，MapPicURLlist工具為地圖瓦片URL的輔助工具，將所有需要用到的地圖瓦片全部下載下來(lái)并在本地按照原有路徑組織好后，修改地圖引用路徑即可。

地圖默認引用路徑在include.js文件的第一行：var strImgsvrUrl = "http://img.mapbar.com/maplite/";，將藍色內容替換成自己已經(jīng)下載好的本地可訪(fǎng)問(wèn)路徑即可。

4，如何改回13級放大縮小控制條

由于個(gè)人覺(jué)得沒(méi)有必要顯示13級，加上只在北京地區使用，所以撤掉13級，直接更改為7級，需要改回的話(huà)，需要修改的參數較多，主要是一些數字的微調，除了var R$1=7;中的7改為13，以及

var Y8802、var Ud0、var e3I、var e7DU4、var uGE$等參數需要設置外，還有許多地方需要調整，主要是圖片原有高度較高，修改后高度較低，建議使用文件比較器將include.js文件同我原來(lái)分享的MapBar研究(百度地圖中的JS部分)一文中的avinclude.js進(jìn)行對比，就可以看到好幾處數字的修改，修改回去即可還原13層級的控制條。

5，如何撤銷(xiāo)或擴大地圖范圍區域

由于僅需要顯示北京范圍的地圖，所以個(gè)人對地圖范圍做了一定的限制，導致地圖平移到地圖邊界的時(shí)候無(wú)法再拖動(dòng)，會(huì )彈回到地圖區域范圍內。

此部分的設置在：var ph90=new Array(38,42);var o8$=new Array(114,118);，將這里的經(jīng)緯度值改為自己需要的經(jīng)緯度值即可。原有默認的中國地圖范圍區域為：var ph90=new Array(0,55);var o8$=new Array(-75,135);，這個(gè)范圍可以顯示全國甚至整個(gè)亞洲地區。

 

 

本文地址：http://www.nwafulive.cn/c/20123940.html

分享到：

---

【刷新頁(yè)面】【加入收藏】【打印此文】 【關(guān)閉窗口】

• 上一篇：國內各大地圖API坐標系統比較
• 下一篇：WordPress網(wǎng)站幻燈廣告插件HelloFlash改良版