這個WebMap的引擎實則我早就(2006年初)分享過了，只是當時也沒有人注意。08年的時候，我還用這個引擎為別人做過項目，只是當時付了我八成的費用后一拖再拖就不了了之了，后來再回頭找到我的時候我也不搭理他們了。時過境遷，又是三個年頭(11年都快結束了)過去了，今天在移動硬盤里竟然無意看到了這個當年的項目，簡單的看了一下代碼，竟然還能用，加上文檔比較健全，所以簡單整理一下后打包分享給大家。
這個WebMap引擎實際上是MapBar早年的引擎，當年寫出這樣的引擎來應該說是非常牛的，現在看來也許已經不怎么先進了，而且現在MapBar的技術也應該進步了不少，Baidu的地圖應該有MapBar不小的功勞。這個引擎基本上能夠滿足我們基本的需求，更高級的能夠實現像Google的或者Baidu式的開放API引擎差距不小，性能和規范性不佳，但作為項目作為簡單的研究和應用應該是足夠的。具體的來看，有以下幾大功能：
常用功能：放大、縮小、拉框放大、拉框縮小、移動、測距
通過經緯度添加Point
設置地圖中心、獲取地圖中心
移除地圖上所有對象
設置地圖層級、獲得地圖當前層級
地圖自動縮放至經緯度區域范圍
在地圖上手動標注一個Point
拉框查看所拉框矩形的范圍并回調callback函數
顯示line
我做了一個Demo，可以訪問 查看實際效果，也可以看我提供的截圖：
基于以上的功能，結合起來使用則可以實現更多的應用(文檔中有具體實例分析)。
文件我已經全部打包，下載地址：http://sharesh.googlecode.com/files/WebMapEngine_MapBar.zip，歡迎大家下載使用，歡迎分享交流并改進。
詳細說明如下(以下內容已經保存到壓縮包的word文檔中)：
WEBMAP引擎使用說明
一，文件列表
Images目錄：需要用到的圖片文件
Js目錄：主要的JS和CSS文件，核心內容
config.js：引擎參數設置
css.css：引擎調用部分的CSS文件，控制外觀
graphics.js：FireFox兼容文件
include.js：主JS文件
map.htm：地圖頁面，直接地圖內容頁面或者作為iframe框架調用頁面
Index.html：Demo頁面，列舉了絕大部分功能的實現
MapPicURLlist.exe：獲取地圖圖片路徑的輔助工具
二，開始使用WEBMAP引擎
如果直接使用地圖內容頁面，即將地圖直接嵌入到網頁中，說明如下：
新建一個html頁面或者動態頁面，HTML代碼需要注意的地方有：
1，此內容不需要，否則會造成地圖引擎的失敗；
2，
此內容需要更改為：
3，在
下需要增加
此部分為VML支持
題外話：由于CSS和JS文件均采用UTF-8編碼，所以建議將頁面語言也設置為UTF-8編碼，否則會造成顯示不正常。如果改用GB2312等編碼，則需要打開所有CSS和JS文件并另存為相應編碼格式的文件才能調用。相關網頁語言定義如下：
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為一個新的對象AVMaplet；
第二行為地圖顯示，即初始化地圖；
AVMaplet(lat, lon, zoomLevel, width, height, top, left, defaultMarkImage, style);
其中
Lat：緯度，數字
Lon：經度，數字
ZoomLevel：縮放級別，數字。(注意：此處初始化縮放級別如果超過最大縮放級別，則地圖引擎無法顯示。此處最大縮放級別為7，總共為8級，包括0級)
Width：地圖寬度，數字，單位為像素
Height：地圖高度，數字，單位為像素
Top：相對于body上層的寬度，數字，單位為像素，建議數字為0
Left：相對于body左側的寬度，數字，單位為像素，建議數字為0
說明：由于地圖DIV框架的position設置為absolute，所以整個地圖DIV游離于body之中，需要使用Top和Left定位。而正由于此原因，建議數字為0，并使用iframe框架設計，而非頁面直接調用地圖引擎。
DefaultMarkImage：默認地圖標注圖片，文字，此處意義不大，建議設置為一個存在的默認標注圖片即可。
Style：地圖樣式，文字，此處必須設置為baidu。此樣式的本意是對于不同的合作伙伴提供不同的地圖畫面樣式，但MapBar和百度合作后就再也沒有變動過地圖樣式，可能是百度作為大客戶的原因吧。此處樣式必須設置為baidu，不然無法調用遠程MapBar服務器上的圖片。
至此，一個顯示地圖的頁面就完成了，將文件保存為html文件即可。
由于上述原因的限制，強烈建議使用iframe嵌套以上的html文件來調用地圖引擎，而不采用單獨頁面直接調用的模式。
以上內容的相應代碼請參考map.htm文件。
Iframe框架調用說明：如果使用iframe框架調用，則首先需要為iframe定義一個id，建議增加定義一個name，border建議設置為0，scrollbar等建議設置為無，width和height設置為地圖對象的width和height，這樣就可以無縫顯示在網頁中。建議在iframe外在包一個div，并將div的width和height設置同上，此處有利于定位。
三，WEBMAP引擎函數列表
根據上述即可開始使用地圖引擎，那么如何對地圖進行操作呢，請見函數列表：
(根據第二部分的假定，我們已經在body中創建了一個AVMaplet，那么下面的函數涉及到的是對該object的操作)
1，object. showMap()
功能：初始化地圖
說明：此函數需要緊跟object定義后立即執行，整個地圖引擎中只調用一次。
2，object. addPoint(strIcon, dLat, dLon, strLabel, strInfo, bLabelOn)
功能：增加一個Point。該point帶有標題和文字的氣泡框。
說明：
strIcon：point顯示的圖片，string
dLat：緯度，double
dLon：經度，double
strLabel：標題，string
strInfo：內容，string。支持HTML語法
bLabelOn：是否顯示標題。1為顯示，其余為不顯示。在沒有特殊情況下，建議不顯示標題。對于大量的point建議不顯示標題。
3，object. addPoint2(strIcon, strLatLon, strLabel, strInfo, bLabelOn)
功能：增加一個point，同上。
說明：
strLatLon：加密后的經緯度坐標值。
此函數同addPoint函數的差別在于坐標的使用，此函數使用加密后的文字坐標，其余無任何差異。
4，object. setCenter(dLat,dLon)
功能：將地圖中心設置為指定坐標位置。
說明：
dLat：緯度，double
dLon：經度，double
5，object.clean()
功能：清除地圖中的所有對象，即所有的point、line和polygon。
說明：此函數主要用于一批新的對象建立前。比如新建一次查詢，一般則需要清除地圖中所有對象后再將結果對象顯示到地圖中。
6，strZoomLevel = object. getZoomLevel()
功能：獲取當前地圖的縮放級別
說明：此函數返回縮放級別的字符，比如4級則返回4。
7，object. setZoomLevel(zm)
功能：設置地圖縮放級別
說明：
zm：縮放級別，int。
注意，地圖中的縮放級別是從0級開始的，在使用過程中注意不要超過最大縮放級別數。
8，object. zoomIn()
功能：放大，將當前地圖縮放級別增加一級。
說明：此功能和縮放控制條中的+按鈕功能完全一致。
9，object. zoomOut()
功能：縮小，將當前地圖縮放級別縮小一級。
說明：此功能和縮放控制條中的-按鈕功能完全一致。
10，object. setAutoZoom(minLat, minLon, maxLat, maxLon)
功能：根據最小和最大經緯度坐標值自動設置縮放級別
說明：
minLat：最小緯度
minLon：最小經度
maxLat：最大緯度
maxLon：最大經度
11，object. addPolylineString(strStyle,strLine)
功能：增加一條線段
說明：
strStyle：線條樣式，string。樣式共有三部分組成，由逗號隔開，比如“4,0,#0000FF”
，其中，4表示線條寬度，0為外包邊，#0000FF表示線條顏色。
12，object. refresh ()
功能：刷新地圖頁面
說明：此處在對地圖進行某些操作后，刷新地圖讓效果立即顯示。比如添加線條后不能立即顯示線條，則需要本函數，但在很多情況下此函數自動包含，比如設置縮放級別的函數中就自帶了刷新功能。
?。。?/font>13，object. setMode(toolnum)
功能：設置地圖中的鼠標功能，比如放大、縮小、漫游(平移)、拉框查詢、標注等。鼠標一般默認狀態為漫游狀態。
說明：
toolnum：模式參數，int，參數為1/2/3/5/6/11共6種模式。其中：
1：拉框放大
2：拉框縮小
3：漫游(平移)，鼠標默認狀態
5：拉框查詢
6：標注點，Mark
11：測距。同控制條上的測距功能完全一致。
注意，拉框放大和拉框縮小如果需要使用則必須將漫游功能顯示，不然將無法返回到漫游狀態。拉框查詢和標注點功能完成后建議設置返回漫游狀態。測距功能完成后自動返回到漫游狀態。
拉框查詢和標注點功能需要結合callback函數一起使用，默認狀態下拉框查詢和標注點只返回一段字符串，字符串格式如下：
拉框查詢返回字符串：&act=lookup&ctr=strLatLon&size=Width,Height&range=Left1,Top1,Left2,Top2&zm=ZoomLevel
標注點返回字符串：&act=add&latlon=strLatLon&zm=ZoomLevel
字符串中使用&將各個參數串聯起來，并且每個參數所對應的值使用=隔開。需要對此字符串自行解析。參數說明如下
act：動作，固定值，用于區分動作，lookup表示拉框查找，add表示標注點
ctr：地圖中心坐標，加密后坐標值
size：地圖大小，返回寬和高，使用逗號分隔開
range：拉框大小，返回起點定位和終點定位，即矩形的兩個對角，共返回四個值，使用逗號隔開，分別為起點相對于地圖的左邊距和上邊距、終點相對于地圖的左邊距和上邊距。特別說明，左邊距和上邊距需要比對后才能確定起點還是終點的邊距大，并以此推算出拉框的最小和最大經緯度。
zm：縮放級別，返回縮放級別數值
latlon：標注點的坐標位置，加密后坐標值
特別注意，此callback函數僅僅返回地圖中的信息，不做任何其他處理，建議結合Form或者外部頁面共同使用來完成信息提交、查詢等功能。比如將callback函數返回的參數值傳遞給Form中的hideInput。
14，dLatLon = b.p(strLatLon)
功能：解密函數，將文字坐標解密成經緯度坐標
說明：
strLatLon：文字坐標
解密后得到的結果為數組，dLatLon[1]為緯度，dLatLon[0]為經度
15，strLatLon = jiami(dLat,dLon)
功能：將數字經緯度坐標加密成文字坐標，即b.p函數的反函數。
說明：
dLat：緯度，double
dLon：經度，double
加密后得到的結果為字符串
注意，本函數為了方便使用特意提取成單獨的函數。
四，WEBMAP引擎使用實例(以房源地圖為例)
首先我們假定地圖引擎已經成功嵌入并成功顯示
1，價格查詢
功能描述：在地圖上劃取一個矩形，計算該矩形內房源的平均價格
解決方法：
頁面中一個Form用于提交數據，四個textInput(建議hiden)用于獲取最小和最大經緯度，一個Button用于設置地圖鼠標狀態并在callback函數中返回最小和最大經緯度。甚至可以一步到位在callback函數中直接提交給動態頁面進行查詢，并最終由動態頁面生成結果。
地圖引擎的關鍵在于提供拉框返回的最小和最大經緯度，功能集中于Button，設置button的onclick事件為：object. setMode(5)，當button被按下后改變地圖引擎中的鼠標狀態為拉框查詢，在地圖中進行拉框查詢后返回callback函數，callback函數解析后返回最小和最大經緯度。
2，房源標注
功能描述：在地圖上顯示某個房源的位置
解決方法：
頁面中一個Form用于提交數據，兩個textInput用于獲取標注點的經緯度，一個button用于設置鼠標狀態并在callback函數中返回經緯度。
地圖引擎的關鍵在于提供標注點的經緯度，功能集中于button，設置button的onclick時間為：object. setMode(6)，當button被按下后改變地圖引擎中的鼠標狀態為標注點，在地圖中單擊后返回callback函數，callback函數解析出坐標后返回經緯度。
3，劃圖找房
功能描述：在地圖上劃取一個矩形，選擇查詢條件，查詢矩形內滿足查詢條件的房源以列表形式顯示。在地圖上標注房屋位置。
解決方法：同第一條，涉及屬性條件查詢請使用動態語言解決。
4，公交線路找房
功能描述：查詢某一條公交、地鐵線路站點周邊1Km內滿足查詢條件的租賃房源以列表形勢顯示。在地圖上標注房屋位置，當鼠標移動到房屋位置時顯示乘車線路。
解決方法：
共分為兩步，第一步查找公交線路并顯示公交站點，第二步在公交站點附近查找房源。
查找公交線路并顯示公交站點：使用一個input和一個button，input中為公交線路查詢關鍵字，button為Form的提交查詢功能。查詢完成顯示線路結果，在點擊線路的時候動態語言觸發再次查詢，即查詢該線路的公交站點和公交線路的坐標，查詢完成顯示結果的時候，需要加入javascript來操作地圖，主要的函數有addPoint函數和addPolylineString函數，用于顯示公交站點和公交線路，由于addPoint中有標題和內容之分，內容支持HTML，所以建議站名作為標題，在內容中加入查詢附近房源功能按鈕以備第二步使用。同時建議動態語言計算出公交線路的最小和最大經緯度，使用setAutoZoom函數將地圖縮放至合適的縮放比例。
查找公交站點附近房源：在氣泡框中放入距離下拉框和button，和兩個隱性input，兩個隱性input為第一步中傳遞的該站點的經緯度，距離下拉框為一公里、兩公里等的距離選擇，由于1經緯度等于111公里，所以一公里約為0.009度，只需要根據公交站的坐標位置減去和加上0.009度，即得到了最小和最大經緯度的方框，再根據此框使用動態語言查詢，方法同一。此處重點在于根據點位置設計出一個矩形框再進行查詢。
5，目的地找房
功能描述：在地圖上點取一個點，查詢該點周圍500M內所有經過的公交、地鐵線路，并查詢這些線路站點周邊1Km內滿足查詢條件的租賃房源以列表形勢顯示。在地圖上標注房屋位置，當鼠標移動到房屋位置時顯示乘車線路。
解決方法：
同第4條中的第二步，差別在于此處的點位置由標注點功能產生。
6，公交線路添加、修改、刪除
解決方法：
由于公交線路數據為外部抓取，建議使用數據庫導入。
7，地點經緯度添加、修改、刪除
解決方法：
添加同第2條。修改和刪除為動態語言操作數據庫。
五，MapPicURLlist工具的使用
MapPicURLlist工具主要功能為在固定經緯度范圍內的圖片URL list出來，并保存成文件。旨在解決離線或者局域網內使用WEBmap引擎問題。
![wps_clip_image-12055[6]](http://rovertang.com/blog/wp-content/uploads/2011/11/wps_clip_image-120556.png "wps_clip_image-12055[6]")
如上圖所示，圖片URL地址建議保持不變，此為瓦片的默認原始路徑，輸入最大最小經緯度值，選擇好層級，點擊PNGlist，則自動list出所有該層級、經緯度范圍下的圖片URL列表，然后點擊FileSave則自動生成PNGFileList13.txt文件，其中數字13為你設置的層級。
本工具僅為輔助工具，僅list出圖片的URL，若需要本地離線使用地圖，則需要將保存后的URL列表通過其他下載工具(如迅雷)下載下來，并按照原有路徑保存。
六， FAQ
1，如何修改右下角文字和鏈接
Include.js文件中查找關鍵字“MapBar&ShareSh”和“http://sharesh.cn”即可
文字內容為：var WY9Xv=’©MapBar&ShareSh ‘;，將藍色內容改成自己的內容即可。
鏈接內容為：window.open("http://sharesh.cn");，將藍色內容改成自己的鏈接即可。
2，控制條、比例尺、版權鏈接的隱藏
Include.js文件中查找以下關鍵字
隱藏左上角控制條：this.lC8O6=true; 將true設置為false即可；
隱藏左下角比例尺：this.Q1E=true; 將true設置為false即可；
隱藏右下角版權鏈接：this.v2a2=true; 將true設置為false即可；
3，如何實現地圖的本地訪問
如上所述，MapPicURLlist工具為地圖瓦片URL的輔助工具，將所有需要用到的地圖瓦片全部下載下來并在本地按照原有路徑組織好后，修改地圖引用路徑即可。
地圖默認引用路徑在include.js文件的第一行：var strImgsvrUrl = "http://img.mapbar.com/maplite/";，將藍色內容替換成自己已經下載好的本地可訪問路徑即可。
4，如何改回13級放大縮小控制條
由于個人覺得沒有必要顯示13級，加上只在北京地區使用，所以撤掉13級，直接更改為7級，需要改回的話，需要修改的參數較多，主要是一些數字的微調，除了var R$1=7;中的7改為13，以及
var Y8802、var Ud0、var e3I、var e7DU4、var uGE$等參數需要設置外，還有許多地方需要調整，主要是圖片原有高度較高，修改后高度較低，建議使用文件比較器將include.js文件同我原來分享的MapBar研究(百度地圖中的JS部分)一文中的avinclude.js進行對比，就可以看到好幾處數字的修改，修改回去即可還原13層級的控制條。
5，如何撤銷或擴大地圖范圍區域
由于僅需要顯示北京范圍的地圖，所以個人對地圖范圍做了一定的限制，導致地圖平移到地圖邊界的時候無法再拖動，會彈回到地圖區域范圍內。
此部分的設置在：var ph90=new Array(38,42);var o8$=new Array(114,118);，將這里的經緯度值改為自己需要的經緯度值即可。原有默認的中國地圖范圍區域為：var ph90=new Array(0,55);var o8$=new Array(-75,135);，這個范圍可以顯示全國甚至整個亞洲地區。
Copyright@ 2011-2016 版權所有：大連千億科技有限公司 遼ICP備11013762-3號 google網站地圖 百度網站地圖 網站地圖
公司地址：大連市沙河口區中山路692號辰熙星海國際2317 客服電話：0411-39943997 QQ：2088827823 37482752
法律聲明：未經許可，任何模仿本站模板、轉載本站內容等行為者，本站保留追究其法律責任的權利！ 隱私權政策聲明
