लीफलेट जेएस

Question

में मार्कर के साथ डेटा कैसे पास करें, मैं अपने प्रोजेक्ट में ओपनस्ट्रीटमैप के साथ लीफलेट जेएस का उपयोग कर रहा हूं।
मेरे पास मेरे मानचित्र में एक ही स्थान पर एकाधिक सर्कलमार्क हैं।
मैं उस सर्कलमार्कर्स में कुछ आईडी स्टोर करना चाहता हूं ताकि मैं पहचान सकूं कि सर्कलमार्कर पर क्लिक होने पर कौन सा डेटा रेफर किया जाना चाहिए।

मेरे circlemarker

var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 }); 
myMarker.addTo(map); 

यहाँ मैं अन्य उद्देश्य है कि नहीं कर सकते मुझे इसका उपयोग क्यों के लिए शीर्षक का उपयोग कर रहा है।
क्या कोई मुझे ऐसा करने का कोई तरीका बता सकता है।

Answer 1

ऐसा लगता है कि आप मौजूदा वर्ग में नई कार्यक्षमता (फ़ंक्शंस, गुण, आदि) जोड़ना चाहते हैं। इसके लिए ऑब्जेक्ट उन्मुख प्रिंसिपल का उपयोग करना समझदारी होगी। इस उद्देश्य के लिए, मैं आपको उन गुणों को जोड़ने के लिए CircleMarker क्लास को विस्तारित करने की अनुशंसा करता हूं।

customCircleMarker = L.CircleMarker.extend({ 
    options: { 
     someCustomProperty: 'Custom data!', 
     anotherCustomProperty: 'More data!' 
    } 
}); 

अब जब आप अपना सर्कल मार्कर बनाते हैं, तो इसके बजाय अपनी विस्तारित ऑब्जेक्ट का एक उदाहरण बनाएं।

var myMarker = new customCircleMarker(myPoint, { 
    title: 'unselected', 
    radius: 20, 
    someCustomProperty: 'Adding custom data to this marker!', 
    anotherCustomProperty: 'More custom data to this marker!' 
}); 
myMarker.addTo(map); 

अब आप जैसे गुणों को मार्कर से कोई अन्य विकल्प प्राप्त कर सकते हैं। यह विस्तार का एक साधारण मामला है, और आप आवश्यकतानुसार अधिक कर सकते हैं, जैसे ऑब्जेक्ट में अन्य गुण या फ़ंक्शंस जोड़ना।

JSFiddle उदाहरण: JSFiddle

Answer 2

सिर्फ तस्वीर को पूरा करने, एक हैंडलर जो के वर्तमान संस्करण के साथ एक मार्कर पर एक माउस क्लिक करने के लिए जवाब और उपयोग के लिए नए विकल्प प्रदान करेगा

function onMarkerClick(e) { 
    console.log("You clicked the marker " + e.target.options.someCustomProperty); 
    console.log("You clicked the marker " + e.target.options.anotherCustomProperty); 
} 
marker.on('click', onMarkerClick); 

Answer 3

बनाने के लिए लीफलेट (0.8-देव) आप कस्टम मार्कर क्लास बनाने के बिना मार्कर ऑब्जेक्ट पर अपने कस्टम गुणों को सेट कर सकते हैं ...

function map() { 
    return L.map('leaflet-canvas', 
    { 
     maxZoom: 10, 
     minZoom: 0, 
     crs: L.CRS.Simple 
    }); 
} 

var map = map().setView([0, 0], 10).on('click', onMapClick); 

function onMapClick(e) { 
    var marker = L.circleMarker(e.latlng, {draggable:true}); 

    marker.myCustomID = Math.floor((Math.random() * 100) + 1); 

    marker.on('click', onMarkerClick); 

    map.addLayer(marker); 

    // 'click' the new marker to show the ID when marker created 
    marker.fireEvent('click'); 
} 

function onMarkerClick(e) { 
    alert(e.target.myCustomID); 
} 

Answer 4

मार्कर मूल रूप से जावास्क्रिप्ट ऑब्जेक्ट अनुष्ठान है।

नीचे स्निपेट मेरे मामले को हल करें।

var marker = new L.marker([13.0102, 80.2157]).addTo(mymap).on('mouseover', onClick); 
    marker.key = "marker-1"; 

    var marker2 =new L.marker([13.0101, 80.2157]).addTo(mymap).on('mouseover', onClick); 
    marker2.key = "marker-2"; 

    function onClick(e) { 
    alert(this.key); // i can expect my keys here 
} 

Answer 5

मैं मानक GeoJSON स्वरूप है, जो यह शेपफ़ाइल के रूप में प्रत्यक्ष बचत के लिए संगत बनाता में अपने मार्कर के लिए अपने डेटा में संरचना करने की सिफारिश करेंगे, आदि

var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 }); 
myMarker.properties.id = your_Id; 
myMarker.addTo(map); 

संग्रहीत जानकारी निकालते हैं और ऐसा करने के लिए इसके साथ बातें या इसे अपने कार्यक्रम के अन्य भागों को भेज देगा, दिखा एक नमूना onclick समारोह:

myMarker.on('click',markerOnClick); 
function markerOnClick(e) { 
    my_ID = e.layer.properties.id; 
    console.log(my_ID, e.latlng); 
    // do whatever you want with my_ID 
} 

यह मेरे e.layer.properties वा पता लगाने के लिए कुछ समय लिया y क्लिक किए गए मार्कर गुणों तक पहुंचने के लिए, इसलिए उम्मीद है कि इससे किसी की मदद मिलती है। अधिकांश अन्य उदाहरण केवल मार्कर के लेट-लांग, e.latlng को प्राप्त करने पर केंद्रित हैं। ध्यान दें कि आप एक ही परत/मार्करों के समूह के साथ भी इस कोड का उपयोग कर सकते हैं। समारोह प्रत्येक व्यक्तिगत मार्कर पर काम करेगा।