OpenLayers

का उपयोग करके मैप करने के लिए गतिशील रूप से कस्टम मार्कर जोड़ना मैं उपयोगकर्ताओं को प्रत्येक मार्कर के विवरण के साथ मानचित्र पर कस्टम मार्कर जोड़ने देना चाहता हूं। किसी भी ट्यूटोरियल के लिए कोई सुझाव, लिंक वास्तव में उपयोगी होगा।OpenLayers

स्रोत

2011-01-07 Shreyas

आप अपने मानचित्र पर 'क्लिक' ईवेंट पर एक फ़ंक्शन पंजीकृत कर सकते हैं। जब उपयोगकर्ता उस पर क्लिक करता है, तो चिह्न स्वचालित रूप से जोड़ा जाता है।

कुछ इस तरह का प्रयास करें:

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

    });

सुंदर आसान है, लेकिन मुझे लगता है कि आप इसे समझ सकते हैं :)

स्रोत

2011-01-17 22:13:59

मैं @Fran के समाधान की कोशिश की लेकिन यह मेरे लिए काम नहीं किया। तो मैं this example from openlayers तो अनुकूलित है कि मैं 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>

है इस सरल उदाहरण में उपयोग किए जाने वाले लॉनलाट के लिए ट्रांसफॉर्म विधि के बारे में आपको कुछ पता होना चाहिए: जब आप किसी भी लोनलैट पर [.transform (projection1, projection2)] लागू करते हैं, तो सभी लोनलैट ऑब्जेक्ट्स को बदल दिया जाता है।

कुछ आदेशों के क्रम के साथ खेलें और आप देखेंगे कि मेरा क्या मतलब है।

खींचने योग्य मार्करों के लिए

, this example has it all

स्रोत

2012-07-08 16:55:17

आप तथ्य यह है कि अपने उदाहरण में, आप हर नए जोड़े मार्कर का नया परत "मार्कर" का निर्माण कर रहे के बारे में पता कर रहे हैं? यह बहुत अच्छा नहीं है। बेहतर समाधान यह है कि इसे ऊपर एक ब्लॉक में एक बार बनाना है। अन्यथा, यह बहुत अच्छा समाधान है, इसके लिए धन्यवाद। – SummerBreeze

आप बिल्कुल सही हैं। रडार के नीचे फिसल गया। headsup के लिए tks! –

नमस्ते, आप विभिन्न लोन लेट के बीच मतभेदों को समझाने की देखभाल कर रहे हैं जिन्हें आप पुनर्प्राप्त कर रहे हैं? धन्यवाद – rikket

उत्तर

संबंधित मुद्दे