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

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

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

我做了一個Demo，可以訪問     查看實際效果，也可以看我提供的截圖：

基于以上的功能，結(jié)合起來使用則可以實現(xiàn)更多的應(yīng)用(文檔中有具體實例分析)。

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

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

此內(nèi)容需要更改為：

 

3，在

下需要增加

此部分為VML支持

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

 

 

 

 

4，插入CSS和JS

 

 

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

！！！5.顯示地圖(調(diào)用地圖引擎顯示地圖)

在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為一個新的對象AVMaplet；

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

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

其中

Lat：緯度，數(shù)字

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

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

Width：地圖寬度，數(shù)字，單位為像素

Height：地圖高度，數(shù)字，單位為像素

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

Left：相對于body左側(cè)的寬度，數(shù)字，單位為像素，建議數(shù)字為0

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

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

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

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

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

以上內(nèi)容的相應(yīng)代碼請參考map.htm文件。

 

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

 

三，WEBMAP引擎函數(shù)列表

根據(jù)上述即可開始使用地圖引擎，那么如何對地圖進行操作呢，請見函數(shù)列表：

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

1，object. showMap()

功能：初始化地圖

說明：此函數(shù)需要緊跟object定義后立即執(zhí)行，整個地圖引擎中只調(diào)用一次。

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

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

說明：

strIcon：point顯示的圖片，string

dLat：緯度，double

dLon：經(jīng)度，double

strLabel：標(biāo)題，string

strInfo：內(nèi)容，string。支持HTML語法

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

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

功能：增加一個point，同上。

說明：

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

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

4，object. setCenter(dLat,dLon)

功能：將地圖中心設(shè)置為指定坐標(biāo)位置。

說明：

dLat：緯度，double

dLon：經(jīng)度，double

5，object.clean()

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

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

6，strZoomLevel = object. getZoomLevel()

功能：獲取當(dāng)前地圖的縮放級別

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

7，object. setZoomLevel(zm)

功能：設(shè)置地圖縮放級別

說明：

zm：縮放級別，int。

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

8，object. zoomIn()

功能：放大，將當(dāng)前地圖縮放級別增加一級。

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

9，object. zoomOut()

功能：縮小，將當(dāng)前地圖縮放級別縮小一級。

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

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

功能：根據(jù)最小和最大經(jīng)緯度坐標(biāo)值自動設(shè)置縮放級別

說明：

minLat：最小緯度

minLon：最小經(jīng)度

maxLat：最大緯度

maxLon：最大經(jīng)度

11，object. addPolylineString(strStyle,strLine)

功能：增加一條線段

說明：

strStyle：線條樣式，string。樣式共有三部分組成，由逗號隔開，比如“4,0,#0000FF”

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

12，object. refresh ()

功能：刷新地圖頁面

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

！！！13，object. setMode(toolnum)

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

說明：

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

1：拉框放大

2：拉框縮小

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

5：拉框查詢

6：標(biāo)注點，Mark

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

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

拉框查詢和標(biāo)注點功能需要結(jié)合callback函數(shù)一起使用，默認狀態(tài)下拉框查詢和標(biāo)注點只返回一段字符串，字符串格式如下：

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

標(biāo)注點返回字符串：&act=add&latlon=strLatLon&zm=ZoomLevel

字符串中使用&將各個參數(shù)串聯(lián)起來，并且每個參數(shù)所對應(yīng)的值使用=隔開。需要對此字符串自行解析。參數(shù)說明如下

act：動作，固定值，用于區(qū)分動作，lookup表示拉框查找，add表示標(biāo)注點

ctr：地圖中心坐標(biāo)，加密后坐標(biāo)值

size：地圖大小，返回寬和高，使用逗號分隔開

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

zm：縮放級別，返回縮放級別數(shù)值

latlon：標(biāo)注點的坐標(biāo)位置，加密后坐標(biāo)值

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

14，dLatLon = b.p(strLatLon)

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

說明：

strLatLon：文字坐標(biāo)

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

15，strLatLon = jiami(dLat,dLon)

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

說明：

dLat：緯度，double

dLon：經(jīng)度，double

加密后得到的結(jié)果為字符串

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

 

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

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

1，價格查詢

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

解決方法：

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

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

2，房源標(biāo)注

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

解決方法：

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

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

3，劃圖找房

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

解決方法：同第一條，涉及屬性條件查詢請使用動態(tài)語言解決。

4，公交線路找房

功能描述：查詢某一條公交、地鐵線路站點周邊1Km內(nèi)滿足查詢條件的租賃房源以列表形勢顯示。在地圖上標(biāo)注房屋位置，當(dāng)鼠標(biāo)移動到房屋位置時顯示乘車線路。

解決方法：

共分為兩步，第一步查找公交線路并顯示公交站點，第二步在公交站點附近查找房源。

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

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

5，目的地找房

功能描述：在地圖上點取一個點，查詢該點周圍500M內(nèi)所有經(jīng)過的公交、地鐵線路，并查詢這些線路站點周邊1Km內(nèi)滿足查詢條件的租賃房源以列表形勢顯示。在地圖上標(biāo)注房屋位置，當(dāng)鼠標(biāo)移動到房屋位置時顯示乘車線路。

解決方法：

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

6，公交線路添加、修改、刪除

解決方法：

由于公交線路數(shù)據(jù)為外部抓取，建議使用數(shù)據(jù)庫導(dǎo)入。

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

解決方法：

添加同第2條。修改和刪除為動態(tài)語言操作數(shù)據(jù)庫。

 

五，MapPicURLlist工具的使用

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

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

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

 

 

六， FAQ

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

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

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

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

2，控制條、比例尺、版權(quán)鏈接的隱藏

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

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

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

隱藏右下角版權(quán)鏈接：this.v2a2=true;  將true設(shè)置為false即可；

3，如何實現(xiàn)地圖的本地訪問

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

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

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

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

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

5，如何撤銷或擴大地圖范圍區(qū)域

由于僅需要顯示北京范圍的地圖，所以個人對地圖范圍做了一定的限制，導(dǎo)致地圖平移到地圖邊界的時候無法再拖動，會彈回到地圖區(qū)域范圍內(nèi)。

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

 

 

---