OpenLayer的Map Event在Event.js文件的OpenLayers.Events中定義。
1 BROWSER_EVENTS: [ 2 "mouseover", //鼠標位於對象或區域上 3 "mouseout", //鼠標移出 4 "mousedown", //鼠標按下 5 "mouseup", //鼠標抬起 6 "mousemove", //鼠標移動 7 "click", //鼠標單擊 8 "dblclick", //鼠標雙擊 9 "rightclick", //鼠標右擊 10 "dblrightclick", //鼠標右鍵雙擊 11 "resize", //調整大小 12 "focus", //獲得焦點 13 "blur" // 14 ],
本文通過定義一個鼠標click事件，來說明Map Event的用法。
1. 定義Event響應函數
1 function onMapClick(e){ 2 // 顯示地圖屏幕坐標 3 var str = "[Screen]:" + e.xy.x + "," + e.xy.y; 4 document.getElementById("screen_xy").innerHTML = str; 5 }
"screen_xy" 是用於顯示鼠標點擊時的坐標數據的div標簽，其定義為：
1 <!--顯示地圖屏幕坐標Div--> 2 <div id="screen_xy"></div>
2. 在map上注冊click事件及其響應函數
1 map.events.register("click", map, onMapClick);
此時，在地圖上單擊鼠標時，onMapClick就會響應click事件，並在預定義的div控件上顯示坐標。
3.獲取click事件的地圖座標
前面獲取到只是click事件的屏幕坐標，如要獲取地圖坐標，需要進行轉換。這里擴充onMapClick函數，實現轉換。
1 function onMapClick(e){ 2 // 顯示地圖屏幕坐標 3 var str = "[Screen]:" + e.xy.x + "," + e.xy.y; 4 document.getElementById("screen_xy").innerHTML = str; 5 // 屏幕坐標向地圖坐標的轉換 6 var lonlat = map.getLonLatFromViewPortPx(e.xy); 7 str = "[Map]:" + lonlat.lat + "," + lonlat.lon; 8 document.getElementById("map_xy").innerHTML = str; 9 }
map對象的getLonLatFromViewPortPx函數，可以實現將屏幕坐標轉換為地圖坐標。
1 // 添加顯示地圖坐標的Div 2 <div id=“map_xy"></div>
效果如下圖所示。click后，左側顯示屏幕坐標，右側顯示地圖坐標。
