在OpenLayers Map添加Marker。
1.创建Marker图层
Maker由Marker图层进行管理
var marker_layer = new OpenLayers.Layer.Markers("markers");
2. 创建Marker对象
1 //创建Marker 位置 2 var pos = new new OpenLayers.LonLat (x, y); 3 //创建Marker对象 4 var marker = new OpenLayers.Marker ( pos ); 5 //透明度 6 marker.setOpacity(opacity); 7 //注册鼠标事件 8 marker.events.register( 'mousedown', marker, onMakerMouseDown); 9 //添加marker到marker layer 10 marker_layer.addMarker(marker);
在marker上注册一个mousedown事件，mousedown事件的响应函数为onMakerMouseDown。
3、定义Marker鼠标事件
function onMakerMouseDown(evt) { alert(marker.CLASS_NAME); //弹出Marker的类名 OpenLayers.Event.stop(evt); //停止事件 }
鼠标点击后，添加一个红色的Marker。
完整代码如下
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> OpenLayer : Event Mouse </TITLE> 5 <link rel="stylesheet" href="./OpenLayers-2.10/theme/default/style.css" type="text/css" /> 6 <link rel="stylesheet" href="./css/style.css" type="text/css" /> 7 <script src="./OpenLayers-2.10/lib/OpenLayers.js"></script> 8 <script type="text/javascript"> 9 10 var map = null; 11 var wms_url = "http://127.0.0.1:8080/geoserver/wms?"; 12 var wms_version = "1.3.0"; 13 var layer_name = 'country'; 14 15 var wms_layer = null; 16 var marker_layer = null; 17 18 var marker = null; 19 20 function init() 21 { 22 //创建map对象， 23 map = new OpenLayers.Map("map"); 24 wms_layer = new OpenLayers.Layer.WMS("OpenLayers WMS", 25 wms_url, 26 {layers: layer_name}, 27 {singleTile: true}); 28 29 marker_layer = new OpenLayers.Layer.Markers("markers"); 30 31 // 添加图层 32 map.addLayers([wms_layer, marker_layer]); 33 map.addControl( new OpenLayers.Control.LayerSwitcher() ); 34 //---------------------------------------------------------------// 35 //注册鼠标事件 36 map.events.register('mousedown', map, onMakerMouseDown); 37 38 // 放大到全屏 39 map.zoomToMaxExtent(); 40 } 41 42 function addMarker(x, y, opacity) 43 { 44 45 marker = new OpenLayers.Marker(new OpenLayers.LonLat(x, y)); 46 //透明度 47 marker.setOpacity(opacity); 48 //注册鼠标事件 49 marker.events.register('mousedown', marker, onMakerMouseDown); 50 marker_layer.addMarker(marker); 51 } 52 53 /* 54 * 鼠标点击Marker的响应函数 55 */ 56 function onMakerMouseDown(evt) 57 { 58 //alert(evt.x); 59 alert(marker.CLASS_NAME); 60 OpenLayers.Event.stop(evt); 61 } 62 63 function onAddMarker() 64 { 65 var x = document.getElementById("X").value; 66 var y = document.getElementById("Y").value; 67 var opacity = document.getElementById("opacity").value; 68 69 addMarker(x, y, opacity); 70 } 71 72 </script> 73 74 </HEAD> 75 76 <BODY onload="init()"> 77 <div> 78 <div>X<input type="text" id="X" value="0"> 79 Y<input type="text" id="Y" value="0"> 80 透明度<input type="text" id="opacity" value="255"> 81 <input type="button" value="Add Marker" onClick="onAddMarker();"></div> 82 <div id="map" class="smallmap"></div> 83 </div> 84 </BODY> 85 </HTML>
