我希望让用户在地图上添加自定义标记,并为每个标记添加描述。有什么提示或链接任何教程都会非常有用。
// 'map' is your map created using new OpenLayers.Map(options)
markers = new OpenLayers.Layer.Markers( "Markers" );
markers.id = "Markers";
map.addLayer(markers);
map.events.register("click", map, function(e) {
//var position = this.events.getMousePosition(e);
var position = map.getLonLatFromPixel(e.xy);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('images/mark.png', size, offset);
var markerslayer = map.getLayer('Markers');
markerslayer.addMarker(new OpenLayers.Marker(position,icon));
});
很简单,但我想你能理解它 :)
place a marker by clicking on the openlayers map
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>MousePosition Control</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
<script src="../OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init(){
var map = new OpenLayers.Map('map');
var proj4326 = new OpenLayers.Projection("EPSG:4326");
var projmerc = new OpenLayers.Projection("EPSG:900913");
var layerOSM = new OpenLayers.Layer.OSM("Street Map");
map.addLayers([layerOSM]);
if (!map.getCenter()) map.zoomToMaxExtent();
map.events.register("mousemove", map, function(e) {
var position = this.events.getMousePosition(e);
OpenLayers.Util.getElement("coords").innerHTML = 'MOUSE POSITION '+position;
var lonlat = map.getLonLatFromPixel( this.events.getMousePosition(e) );
OpenLayers.Util.getElement("lonlatTG").innerHTML = 'lonlat => '+lonlat;
var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
OpenLayers.Util.getElement("lonlatTrans").innerHTML = 'lonlatTransf => '+lonlatTransf;
OpenLayers.Util.getElement("lonlatDouble").innerHTML = 'lonlat => '+lonlat;
});
map.events.register("click", map, function(e) {
var position = this.events.getMousePosition(e);
var icon = new OpenLayers.Icon('http://maps.google.com/mapfiles/ms/icons/red-pushpin.png');
var lonlat = map.getLonLatFromPixel(position);
var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
alert ('lonlatTrans=> lat='+lonlatTransf.lat+' lon='+lonlatTransf.lon+'\nlonlat=>'+lonlat+'\nposition=>'+position);
var lonlat = lonlatTransf.transform(proj4326, map.getProjectionObject());
var markerslayer = new OpenLayers.Layer.Markers( "Markers" );
markerslayer.addMarker(new OpenLayers.Marker(lonlat, icon));
map.addLayer(markerslayer);
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
}
</script>
</head>
<body onload="init()">
<h1 id="title">MousePosition Control</h1>
<div id="tags">coordinate</div>
<p>Click on map and create marker</p>
<div id="map" class="smallmap"></div>
<div id="coords"></div>
<div id="lonlatTG"></div>
<div id="lonlatTrans"></div><br/>
<p>
see how, even though we did NOT transform [lonlat],
<br/>it was nevertheless transformed
</p>
<div id="lonlatDouble"></div>
</body>
</html>
关于在此简单示例中使用的LonLat的TRANSFORM方法,有一些需要注意的事项:当您将 [ .transform(projection1, projection2) ] 应用于任何LonLat时,所有LonLat对象都会被转换。
尝试调整某些命令的顺序,您就会明白我的意思。
对于可拖动标记,this example has it all。