मैं पत्रक का उपयोग कर रहा एक नक्शा आकर्षित करने के लिए बाध्य करने के लिए पॉपअप के भीतर मुझे लगता है कि एक अधिक विस्तृत विवरण के लिए नेतृत्व चाहिए एक कड़ी जोड़ दिया है, विवरण नक्शे से अलग कर दिया और सूची में व्यवस्थित किया जाता है एक accordion का उपयोग कर, तो हर विवरण छुपा हुआ है।में असमर्थ, पत्रक पॉपअप पर क्लिक करने के लिए घटना
मैं एग्रीजन सामग्री से लिंक करने के लिए एक एंकर का उपयोग कर सकता हूं, लेकिन मुझे कुछ जावास्क्रिप्ट onclick निष्पादित करने की आवश्यकता है, इसलिए मैं click ईवेंट हैंडलर जोड़ने की कोशिश कर रहा हूं - यह काम नहीं कर रहा है।
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>-->
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<div id="log"></div>
<div id="map_box_text" class="status_half">
<br>
<br>
<p>List made using JQuery UI accordion, every element is hidden, only on hover it opens, you can click on it to display on map, reverse cliking on map should aopen accordion list description (this), it's currently done using permalinks because I cannot catch click event on a or span tag.
<div class="accordion">
<h4><a href="#" class="pointpopup" id="point_111_11"> Ioff :: **** ***</a></h4>
<div>Detailed data</div>
<br>
<br>
<h4><a href="#" class="pointpopup" id="point_222_22">Us sb :: **** *** </a></h4>
<div>Detailed data</div>
<br>
<br>
<h4><a href="#" class="pointpopup" id="point_333_33">Ioff :: **** ***</a></h4>
<div>Detailed data</div>
<br>
<br>
<h4><a href="#" class="pointpopup" id="point_555_44">Us sb :: **** *** </a></h4>
<div>Detailed data</div>
</div>
</div>
<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var map = new L.Map('map', {
center: new L.LatLng(51.641485,-0.15362),
zoom: 13
});
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/a0ead8ee56bd415896e0c7f7d22e8b6e/997/256/{z}/{x}/{y}.png',
cloudmadeAttrib = 'Map data © 2011 OpenStreetMap contributors',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});
map.addLayer(cloudmade);
var point = {};
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<a href=\"#point_111_11\" class=\"map_popup link\">Ioff</a> <br>**** ***");
point["point_222_22"] = new L.Marker(new L.LatLng(51.6616333333333,-0.0528583333333333)).bindPopup("<a href=\"#point_222_22\" class=\"map_popup link\">Us sb</a> <br>**** ***");
point["point_333_33"] = new L.Marker(new L.LatLng(52.3910783333333,-0.696951666666667)).bindPopup("<a href=\"#point_333_33\" class=\"map_popup link\">Ioff</a> <br>**** ***");
point["point_555_44"] = new L.Marker(new L.LatLng(51.641485,-0.15362)).bindPopup("<a href=\"#point_555_44\" class=\"map_popup link\">Us sb</a> <br>**** ***");
var points_layer = new L.LayerGroup();
points_layer.addLayer(point["point_111_11"]);
points_layer.addLayer(point["point_222_22"]);
points_layer.addLayer(point["point_333_33"]);
points_layer.addLayer(point["point_555_44"]);
map.addLayer(points_layer);
$('.pointpopup').click(function(){
var pointname = this.id;
map.setView(point[pointname].getLatLng(),15);
point[pointname].openPopup();
});
});
$(window).load(function(){
$("body").click(function(event) {
//console.log('event target is:' + event.target.nodeName);
$("#log").html("clicked: " + event.target.nodeName);
});
$('.map_popup').live('click',function() {
//$('.map_popup').click(function(){
alert('Try to open Accordion ' + $(this).attr('href'))
//console.log('Try to open Accordion');
})
})
</script>
</body>
</html>
आप JS Fiddle
पर यह जांच कर सकते हैं मैं पत्रक here और here के डेवलपर को GitHub पर एक बग के रूप में इस रिपोर्ट की है, लेकिन वह करीब बग जवाब दे यह है कि:
यहाँ मेरी कोड है कोई मुद्दा नहीं है और मैं एक और class का उपयोग कर सकता हूं - जो काम नहीं करता है।
संपादित करें: मैं भी अपने दम पर कुछ मिल गया है: http://jsfiddle.net/M5Ntr/12/ लेकिन वहां अभी भी एक समस्या है, संभवतः एक 500 अंक हो सकता है, तो मैं संभव के रूप में कम कोड के रूप में करना चाहते हैं, मैं कोशिश की है समारोह बनाने के लिए, लेकिन मैं चर :(
इस पारित नहीं हो सकता
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").on('click', function (e) { console.log("clicked (Try to open Accordion): " + e.target) });
काम कर रहा है, लेकिन यह बेहतर है (काम नहीं कर रहा):
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").on('click', myfunction('point_111_11'));
function myfunction(seclectedId){
//do something with seclectedId
console.log(seclectedId)
}
या यहाँ तक कि
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").myBindFunction('point_111_11')
जो .on करेंगे ('क्लिक') या इसी तरह के अंदर कुछ ...
मैं अपने दम पर ऐसा कुछ मिला है: – Radamanf
@Geb मुझे लगता है कि अपनी टिप्पणी कुछ याद आ रही है ..... – ManseUK
माफ करना, मैं कहना चाहते हैं अपने समय के लिए धन्यवाद, मैं नवीनीकृत किया है मेरी कुछ लोगों के साथ मूल प्रश्न जो मैं यहां लिखना चाहता हूं, लेकिन टिप्पणियों में लिखना अधिक कठिन है, तो मैं काम पर परेशान था। – Radamanf