OpenLayers-添加Marker
在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"