2011-01-07 24 views

cevap

19

Haritanızdaki 'click' olayına bir işlev kaydedebilirsiniz. Kullanıcı üzerine tıkladığında, işaret otomatik olarak eklenir.

böyle bir şey deneyin:

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

    }); 

Oldukça basit ama bunu anlayabileceği :)

5

i @Fran 'ın çözüm çalıştı ama benim için işe yaramadı düşünüyorum. openlayers tıklayarak işaretleyici pozisyonun enlem ve boylam tasarrufu

  • yer bir işaretleyici

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

    var map: öylesine i 2 şey başarmak ki this example from openlayers böylece uyarlanmış Bu basit örnekte kullanıldığı gibi LonLat için TRANSFORM yöntemiyle ilgili bilmeniz gereken bir şey: herhangi bir LonLat'a [.transform (projection1, projection2)] uyguladığınızda, ALL LonLat nesneleri dönüştürülür.

    Belirli komutların sırasına göre oynayın ve ne demek istediğimi göreceksiniz. sürüklenebilir belirteçler için

    ,

  • +2

    this example has it all Eğer örnekte, her yeni eklenen işaretin yeni katman "İşaretleyiciler" yaratıyor gerçeğinin farkında mı? Bu hoş değil. Daha iyi bir çözüm, bunu yukarıdaki blokta bir kez oluşturmaktır. Aksi takdirde, bu çok güzel bir çözüm, bunun için teşekkürler. – SummerBreeze

    +0

    kesinlikle doğru. radarın altında kaymış. Headup için tks! –

    +2

    Merhaba, aldığınız farklı lon lat arasındaki farkları açıklamaya dikkat et? Teşekkürler – rikket

    İlgili konular