使用 OpenLayers 动态添加自定义标记以进行映射

Question

我想让用户在地图上添加自定义标记，并为每个标记添加说明。任何提示、任何教程的链接都会非常有用。

Answer 1

您可以在地图上注册一个“点击”事件的功能。当用户点击它时，会自动添加标记。

试试这样的：

// '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));

   });

很简单，但我认为你可以理解它:)

Answer 2

我尝试了@Fran 的解决方案，但它对我不起作用。所以我改编了this example from openlayers，这样我就可以完成两件事：

1. 保存标记位置的经纬度

2. 通过点击 openlayers 地图放置一个标记

   <!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