Tôi đang sử dụng Leaflet để vẽ bản đồ, trong cửa sổ bật lên tôi đã thêm liên kết dẫn đến mô tả chi tiết hơn, mô tả được tách khỏi bản đồ và sắp xếp thành danh sách sử dụng accordion, vì vậy mọi mô tả đều bị ẩn.Không thể liên kết với sự kiện nhấp chuột trên tờ rơi Leaflet popup
Tôi có thể sử dụng một liên kết để liên kết với nội dung accordion, nhưng tôi cần thực hiện một số JavaScript onclick vì vậy tôi đang cố gắng thêm một trình xử lý sự kiện click - nó không hoạt động.
Đây là mã của tôi:
<!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>
bạn có thể kiểm tra xem nó trên JS Fiddle
Tôi đã báo cáo này như là một lỗi trên github để phát triển của Tờ rơi here và here nhưng ông lỗi gần trả lời rằng đó là không phải vấn đề và tôi có thể sử dụng một số khác class - không hoạt động.
Chỉnh sửa: Tôi cũng đã tìm thấy một số: http://jsfiddle.net/M5Ntr/12/ Nhưng vẫn còn một vấn đề, có khả năng có thể có 500 điểm, vì vậy tôi muốn có ít mã nhất có thể, tôi đã thử để tạo ra chức năng nhưng tôi không thể vượt qua các biến :(
này đang làm việc
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) });
nhưng điều này là một lợi thế (không hoạt động):
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)
}
hoặc thậm chí
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").myBindFunction('point_111_11')
mà sẽ làm .Trên (nghe tiếng 'click') hoặc một cái gì đó tương tự bên trong ...
Tôi đã tìm thấy một cái gì đó của riêng tôi: – Radamanf
@Geb tôi nghĩ rằng bình luận của bạn còn thiếu một cái gì đó ..... – ManseUK
xin lỗi, tôi muốn nói lời cảm ơn cho thời gian của bạn, tôi đã cập nhật của tôi câu hỏi ban đầu với một số câu hỏi mà tôi muốn viết ở đây, nhưng trong các bình luận thì khó viết hơn, sau đó tôi bị quấy rầy trong công việc. – Radamanf