Agregar marcadores personalizados dinámicamente al mapa con OpenLayers

Me gustaría que los usuarios agreguen marcadores personalizados en un mapa con una descripción para cada marcador. Cualquier sugerencia, enlaces a cualquier tutorial sería realmente útil.Agregar marcadores personalizados dinámicamente al mapa con OpenLayers

Fuente

2011-01-07 Shreyas

Puede registrar una función para 'hacer clic' en su mapa. Cuando el usuario hace clic en él, la marca se agrega automáticamente.

intentar algo como esto:

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

    });

Bastante simple, pero creo que se puede entender :)

Fuente

2011-01-17 22:13:59

he intentado solución @Fran 's, pero no funcionó para mí. por lo que me adapto this example from openlayers de modo que pudiera lograr 2 cosas:

Guardar latitud y longitud de la posición del marcador

lugar un marcador haciendo clic en los openlayers mapa

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

existe algo que debes tener en cuenta con respecto al método TRANSFORM para LonLat como se usa en este ejemplo simple: cuando aplicas [.transform (projection1, projection2)] a cualquier LonLat, TODOS los objetos LonLat se transforman.

juego con el orden de ciertos comandos y verá lo que quiero decir.

para los marcadores que pueden arrastrarse, this example has it all

Fuente

2012-07-08 16:55:17

¿Tiene usted conocimiento de que en su ejemplo, está creando nuevas capas "marcadores" para cada marcador recién agregado? Eso no es muy agradable. Una mejor solución es crear esto una vez en un bloque de arriba. De lo contrario, es una solución muy agradable, gracias por eso. – SummerBreeze

tiene toda la razón. resbaló bajo el radar. tks para el headsup! –

Hola, ¿te importa explicar las diferencias entre los diferentes idiomas que estás recuperando? Gracias – rikket

Agregar marcadores personalizados dinámicamente al mapa con OpenLayers

Respuesta

Cuestiones relacionadas