您的位置：首页 > 运维架构

OpenLayers-添加Marker

2013-02-19 11:49 357 查看
在OpenLayers Map添加Marker。

1.创建Marker图层

Maker由Marker图层进行管理

var marker_layer = new OpenLayers.Layer.Markers("markers");


2. 创建Marker对象

//创建Marker 位置
var pos = new new OpenLayers.LonLat (x, y);
//创建Marker对象
var marker = new OpenLayers.Marker ( pos );
//透明度
marker.setOpacity(opacity);
//注册鼠标事件
marker.events.register( 'mousedown',  marker,  onMakerMouseDown);
//添加marker到marker layer
marker_layer.addMarker(marker);


在marker上注册一个mousedown事件，mousedown事件的响应函数为onMakerMouseDown。

3、定义Marker鼠标事件

function onMakerMouseDown(evt)
{
alert(marker.CLASS_NAME);    //弹出Marker的类名
OpenLayers.Event.stop(evt);  //停止事件
}




鼠标点击后，添加一个红色的Marker。

完整代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> OpenLayer : Event Mouse </TITLE>
<link rel="stylesheet" href="./OpenLayers-2.10/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<script src="./OpenLayers-2.10/lib/OpenLayers.js"></script>
<script  type="text/javascript">

var map = null;
var wms_url = "http://127.0.0.1:8080/geoserver/wms?";
var wms_version = "1.3.0";
var layer_name = 'country';

var wms_layer = null;
var marker_layer = null;

var marker = null;

function init()
{
//创建map对象，
map = new OpenLayers.Map("map");
wms_layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
wms_url,
{layers: layer_name},
{singleTile: true});

marker_layer = new OpenLayers.Layer.Markers("markers");

// 添加图层
map.addLayers([wms_layer, marker_layer]);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
//---------------------------------------------------------------//
//注册鼠标事件
map.events.register('mousedown', map, onMakerMouseDown);

// 放大到全屏
map.zoomToMaxExtent();
}

function addMarker(x, y, opacity)
{

marker = new OpenLayers.Marker(new OpenLayers.LonLat(x, y));
//透明度
marker.setOpacity(opacity);
//注册鼠标事件
marker.events.register('mousedown', marker, onMakerMouseDown);
marker_layer.addMarker(marker);
}

/*
* 鼠标点击Marker的响应函数
*/
function onMakerMouseDown(evt)
{
//alert(evt.x);
alert(marker.CLASS_NAME);
OpenLayers.Event.stop(evt);
}

function onAddMarker()
{
var x = document.getElementById("X").value;
var y = document.getElementById("Y").value;
var opacity = document.getElementById("opacity").value;

addMarker(x, y, opacity);
}

</script>

</HEAD>

<BODY onload="init()">
<div>
<div>X<input type="text" id="X" value="0">
Y<input type="text" id="Y" value="0">
透明度<input type="text" id="opacity" value="255">
<input type="button" value="Add Marker" onClick="onAddMarker();"></div>
<div id="map" class="smallmap"></div>
</div>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航