轉載地址：http://psy-yd.iteye.com/blog/807486
ps：文章將地圖實現的原理分析的很到位，推薦學習！
一、創建一個地圖
瓦片：地圖組成部分，一個地圖信息有多個瓦片拼接而成。
Level ：地圖顯示級別
二、原理
根據地圖基本信息來動態加載 img 集合，並把所有圖片拼接成一個完整的地圖信息。
定義個地圖可視化窗口，設置窗口的大小。
根據地圖的級別、地圖類型來加載對應的瓦片信息（即由一張完成的圖片切割而成的小圖片的集合），根據可視窗口的大小和定義的中心點來計算需要顯示哪些瓦片信息，對於超出可視區域的瓦片，不顯示。得到瓦片信息集合后，把瓦片信息按規則來拼接在一起，顯示成一張完成的圖片信息。
------------------------------------------------
博主經營一家發飾淘寶店，都是純手工制作哦，開業沖鑽，只為信譽！需要的親們可以光顧一下！謝謝大家的支持！
店名：
小魚尼莫手工飾品店
經營:
發飾、頭花、發夾、耳環等（手工制作）
網店：
http://shop117066935.taobao.com/
---------------------------------------------------------------------
繼續正題...
三、地圖移動
在地圖移動過程中，記錄地圖中心點的位置改變。
移動結束后，根據中心點位置改變的大小來重新計算加載的瓦片信息；並調用地圖重繪方法來重新生成顯示的地圖信息。
四、地圖縮放
根據地圖的縮放級別來重新計算加載的瓦片信息。並調用地圖重繪方法來重新顯示地圖信息。
原理：假設當前顯示的地圖 level=2 由
a b
c d
四張圖片按這樣的排列方式拼接而成。點擊放大后 level = 3 ，原理顯示圖片 a 的區域改變為：
a1 a2
a3 a4
四張圖片。其他三個區域改變方式相同。（這里的 a1 ~ a4 是由 level=3 的地圖圖片切割而來的），這樣就實現了地圖放大的效果。
五、地圖 js 功能說明
Map 功能 js 結構如下：
.....
......
功能說明：
1. Action 文件為控制層對象 這里實現對地圖中基本操作的控制，如：地圖的移動，縮放，地圖類型的轉換等。
2. Model 文件為模型定義對象，這里定義了地圖中所有使用模型的定義，如：坐標定義，點定義，矩形區域定義，地圖對象定義，標注定義，工具定義等。同時實現了對這些模型的基本操作方法。
3. Widget 文件界面生成對象，擴展工具定義，地圖基本方法定義和基本地圖工具定義。
4. Mapbuilder.js 地圖創建初始化
5. MapEvent.js 地圖事件定義
6. BaseAction.js 控制層對象
7. BaseModel.js 模型對象
8. BaseWidget.js 界面生成對象
9. Command.js 事件控制對象
10. Listener.js 抽象監聽對象
11. ListenerSupport.js 監聽對象
12. Prototype.js js 庫
13. Util.js 常用操作方法定義
Js 功能說明：
Mapbuilder.js 地圖構建器：地圖構建器對象，對創建地圖進行初始化加載。
Include 方法：動態加載 js 文件，如果有新添加的 js 文件統一在此處加載。
MapBuilder 方法：地圖構建對象，通過創建一個 MapBuilder 對象來生成一個地圖 。其中有以下方法：
outputMap ： 輸出地圖信息。
addTool ： 增加擴展工具信息。
GetMap : 取得地圖對象。
MapEvent.js 地圖事件定義:地圖自定義事件，可以加入實現特定功能的事件和方法。有以下定義方法：
MapEvent. getEventCoord ：取得事件觸發的坐標。添加標注時通過該方法取得標注在地圖上的具體坐標。
MapEvent. addListener ： 為對象添加監聽事件。
Eg ：為地圖添加右鍵單擊事件，定義事件常量
MapEvent.ONCONTEXTMENU = "event.oncontextmenu" ;
為地圖對象添加監聽事件
MapEvent.addListener(map, MapEvent.ONCONTEXTMENU , function (e) {
var coord = MapEvent.getEventCoord(e, map);
…
} );
添加用戶自定義事件（ MapPaneWidget.js 中 customEvent 方法 ）
if (eventName == MapEvent.ONCONTEXTMENU) {
mapDiv.oncontextmenu = this .model.events[MapEvent.ONCONTEXTMENU];
}
GeoObject.js 地理信息定義：坐標定義，點定義和矩形區域定義。並實現了相應的操作方法。
MapModel.js 地圖對象定義
MapModel ：地圖模型定義，定義地圖的縮放比例，中心區域坐標，地圖事件等。
方法：
addOverlay : 添加地圖標注信息，參數為地圖標注對象（ marker ）。在地圖上添加一個標注可以直接用以下方法實現：
MapModel.addOverlay(new Marker(coord.getPoint(), Marker.LARGE));
removeOverlay : 移除單個標注信息（移除指定的標注，參數為標注對象）。
clearOverlays ： 清除地圖所有標注信息。
MapType ：地圖類型定義，我們自定義的地圖類型繼承該方法，並重寫 getSrc 方法來獲得正確的圖片路徑。如果要添加一個新的地圖類型，可以用以下方法實現：
function MapMapType() {
// 繼承 maptype
MapType.apply( this );
// 重寫 getSrc 方法
this .getSrc = function (level, row, column) {
var url = "mapdemo\\images\\zoom" +level+ "\\" +level+ "_" +column+ "_" +row+ ".jpg" ;
return url;
}
}
MapModel.mapTypes = new Array();
MapModel.mapTypes.push( new MapMapType());
這里 new MapMapType() 為我們自定義的地圖類型。
Zoom : 比例模型定義，定義了地圖當前等級，當前所有瓦片集合和邊緣瓦片數。
Tile ：瓦片定義，定義列，行和地圖縮放級別
Overlay.js 地圖覆蓋物定義
Overlay ：地圖覆蓋物抽象類 ，定義覆蓋物區域范圍，坐標，顯示圖形，陰影圖形。
Icon ： 覆蓋物顯示圖標
Marker ： 標記定義（繼承 overlay ）。定義了標記的基本信息，我們可以在起初添加新的屬性，並實現他的 get 和 set 方法。
Marker.LARGE ：定義標記顯示圖片和陰影圖片。
ExttoolsWidget.js 擴展工具類
SliderWidget ：滑塊工具 參數： model （ MapModel 對象）。
定義滑塊工具和點擊放大 / 縮小時觸發事件
sliderMDown ：滑塊拖動
實現在地圖上按住鼠標左鍵可以拖動地圖。
MarkerWidget ： 標記定義
實現對標記信息的添加，對標記信息窗口的顯示和隱藏。
有以下方法：
addMarker ：在地圖上添加一個標記圖片和陰影圖片，並給該標記添加觸發事 件。我們可以對此方法進行改寫。
showInfoWindow ： 顯示標記信息顯示窗口。可以對此方法進行改寫
hideInfoWindown ：隱藏標記信息顯示窗口。
MapTypeWidget ：地圖類型定義。可以定義多個不同類型的地圖信息。
MapPaneWidget.js 地圖面板控制，注冊了地圖的移動，縮放，類型改變和自定義方法事件。定義了地圖的輸出方法。
Paint ：地圖界面繪制方法。
設置地圖容器的 style 屬性，屏蔽右鍵和全選功能，添加地圖移動工具欄，地圖類型切換欄和地圖 div 。
propertyChange ：監聽地圖觸發事件。
實現了對地圖縮放（ zoom ），移動（ move ），用戶自定義事件（ event.addlistener ）和地圖類型變換（ maptype ）事件的控制。根據不同的事件名來進行對應的處理操作。
customEvent ：用戶自定義事件。
可以在此處添加用戶自定義的事件。
changeMaptype ：地圖類型改變方法。
方法先移除就的瓦片集合，然后根據新的地圖類型來重繪顯示的地圖。 paintMap （）地圖重繪方法。
paintMap ：地圖重繪方法。
根據新的地圖 level ，和中心點位置。來取得所有要顯示的瓦片集合（即分割的小圖片），對新取得的集合循環輸出，在顯示的同時判斷該瓦片是否在舊的瓦片集合中存在，如果存在則不重新加載。
mapMDown ：地圖拖動方法。
記錄地圖中心點的位移，拖動完成后重新輸出地圖。
ToolsWidget.js 基本地圖工具，實現地圖的上，下，左，右移動和居中顯示。
MapBuilder.js 地圖構建對象。
加載地圖 js 腳本庫。實現地圖構建器，和地圖的輸出。
Include ：動態載入地圖 js 腳本庫文件，如果有新添加的 js 文件統一在此處加載。
MapBuilder ：地圖構建器，參數： container 為地圖容器。
定義地圖的基本信息，並為地圖添加相應的操作監聽事件。
outputMap ：地圖輸出。根據出入的中心點和地圖顯示 level 調用地圖的 print 方法來輸出地圖信息。
addTool ：添加地圖擴展工具，如滑塊工具和地圖類型變換工具。
getMap ：取得地圖對象。
MapEvent.js 自定義事件控制
getEventCoord ：取得事件觸發的坐標點位置。
addListener ：添加用戶自定義事件監聽。
MapEvent.CLICK ：添加用戶自定義事件。
其他類功能說明，請參考對應的 api 文檔。
地圖使用
1.創建一個 jsp 或 html 頁面，在頁面添加地圖顯示 div
< div align = "center" >
< div id = "newmap" style = "width:800px;height:400px; background :#F2F6FF" " ></ div >
</ div >
2.導入初始化的 js 文件，樣式文件
<!-- 加載樣式 -->
< link rel = "stylesheet" href = "webep/css/style.css" type = "text/css" >
<!-- 加載地圖生成 js 文件 -->
< script language = "JavaScript" src = "mapdemo/js/Util.js" ></ script >
< script language = "JavaScript" src = "mapdemo/js/map/MapBuilder.js" ></ script >
3.自定義地圖類型，重寫 getsrc 方法，並把新的地圖類型添加到 MaoModel 的 mapTypes 中
// 定義自己的 map 類型
function MapMapType() {
// 繼承 maptype
MapType.apply( this );
// 重寫 getSrc 方法
this .getSrc = function (level, row, column) {
var url = "mapdemo\\images\\zoom" +level+ "\\" +level+ "_" +column+ "_" +row+ ".jpg" ;
return url;
}
}
4.設置 MapModel 基本常量值
// 設置地圖顯示基本信息
/** 地圖坐標系范圍 */
MapModel.bound = new Bound(-180e16, 180e16, -90e16, 90e16);
/** 第一個縮放等級的瓦片數 */
MapModel.firstZoomTileNum = 1;
/** 每層縮放之間的比例參數 */
MapModel.scalePara = 2;
/** 瓦片尺寸 */
MapModel.tileSize = 256;
/** 最大縮放比例 */
MapModel.maxZoomLevel = 4;
5.定義地圖初始化對象，調用 outoutMap 方法輸出地圖，添加地圖縮放移動工具
// 初始化 mapbuilder 對象
var mymapbuilder = new MapBuilder($( "newmap" ));
// 輸出地圖信息
mymapbuilder.outputMap( new Point(10, -20), 3);
// 滑塊工具
mymapbuilder.addTool(MapBuilder.TOOL_SLIDERBAR);
6.地圖類型切換工具
// 定義的第二個地圖類型
function MyType1() {
// 繼承 maptype
MapType.apply( this );
// 添加地圖切換圖片
this .enablePic = imgBaseDir + "maptype_1b.gif" ;
this .disablePic = imgBaseDir + "maptype_1a.gif" ;
// 重寫 getSrc 方法
this .getSrc = function (level, row, column) {
var url = "mapdemo\\images\\zoom" +level+ "\\" +level+ "_" +row+ "_" +column+ ".jpg" ;
return url;
}
}
// 添加第二個地圖類型
MapModel.mapTypes.push( new MyType1());
// 地圖類型工具
mymapbuilder.addTool(MapBuilder.TOOL_MAPTYPE);
7.添加 / 刪除標記
添加標記：
// 添加一個標記
var newmark = new Marker( new Point(20,-20),Marker.LARGE);
newmark.setInfo( " 您添加了一個新的標記 " );
map.addOverlay(newmark);
刪除標記：
Map.removeOverlay(mark); // 刪除指定標記信息
8.添加自定義方法
在 ExtToolsWidget.js 中 addMarker 方法中，可以為標注添加自定義的事件
店名：
小魚尼莫手工飾品店
經營:
發飾、頭花、發夾、耳環等（手工制作）
網店：
http://shop117066935.taobao.com/