1
지도, 이러한 마커 "부모"마커 및 "아이"마커로 구성되어 여러 마커를 넣을-루프 내부의 개별 이벤트 리스너를 만듭니다. 특정 부모 마커를 클릭하면 특정 부모 마커의 자식 마커를 켜기/끄기로 전환해야하지만 모든 부모 마커는지도에 동시에 표시되어야합니다.리플릿은 : 내가 원하는
다음 실습 예제를 작성하여 : 나는 꽤 많은 마커를 표시 할 때문에
<!DOCTYPE html>
<html>
<head> \t
\t <title>Test 1</title>
\t <meta charset="utf-8" />
\t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
\t <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
body {padding: 0; margin: 0;}
html, body, #map {height: 100%;}
</style>
</head>
<body>
<div id='map'></div>
<script>
var thunder = L.tileLayer('https://{s}.tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png', {subdomains:'abc', attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var map = L.map('map',{layers: [thunder]}).setView([50.08, 10.08], 12);
var parent1 = L.marker([50.0, 10.0]).bindPopup('Marker 1');
var parent2 = L.marker([50.1, 10.1]).bindPopup('Marker 2');;
var layergroupParents = L.layerGroup([parent1, parent2]);
layergroupParents.addTo(map);
var child1a = L.marker([50.02, 10.02],{title: 'Child 1a'});
var child1b = L.marker([50.04, 10.04],{title: 'Child 1b'});
var layergroupChilds1 = L.layerGroup([child1a, child1b]);
var child2a = L.marker([50.12, 10.12],{title: 'Child 2a'});
var child2b = L.marker([50.14, 10.14],{title: 'Child 2b'});
var layergroupChilds2 = L.layerGroup([child2a, child2b]);
parent1.on('click', function(){
if (map.hasLayer(layergroupChilds1)) {
\t map.removeLayer(layergroupChilds1)
} else {
layergroupChilds1.addTo(map);
\t }
});
parent2.on('click', function(){
if (map.hasLayer(layergroupChilds2)) {
\t map.removeLayer(layergroupChilds2)
} else {
layergroupChilds2.addTo(map);
\t }
});
</script>
</body>
</html>, 내가 들어-루프의 도움을하여 마커를 배열 ("markerArray")에 마커의 속성을 넣어 처리합니다 :
각각의 부모 - 마커에 개인 '클릭'이벤트를 할당하는 일부 문제가 있음을당신이 볼이 스크립트를 실행하면
<!DOCTYPE html>
<html>
<head> \t
\t <title>Test 2</title>
\t <meta charset="utf-8" />
\t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
\t <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
body {padding: 0; margin: 0;}
html, body, #map {height: 100%;}
</style>
</head>
<body>
<div id='map'></div>
<script>
var thunder = L.tileLayer('https://{s}.tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png', {subdomains:'abc', attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var map = L.map('map',{layers: [thunder]}).setView([50.08, 10.08], 12);
var markerArray = [
["Marker 1", 50.0, 10.0, [["Child 1a", 50.02, 10.02], ["Child 1b", 50.04, 10.04]]],
["Marker 2", 50.1, 10.1, [["Child 1a", 50.12, 10.12], ["Child 1b", 50.14, 10.14]]],
];
var numberParents = markerArray.length;
var layergroupParents = L.layerGroup();
for (cnt1=0; cnt1<numberParents; cnt1++) {
var parentObject = L.marker([markerArray[cnt1][1], markerArray[cnt1][2]]);
parentObject.bindPopup(markerArray[cnt1][0]);
layergroupParents.addLayer (parentObject);
var numberChilds = markerArray[cnt1][3].length;
var layergroupChilds = L.layerGroup();
for (cnt2=0; cnt2<numberChilds; cnt2++) {
var childObject = L.marker([markerArray[cnt1][3][cnt2][1], markerArray[cnt1][3][cnt2][2]], {title: markerArray[cnt1][3][cnt2][0]});
layergroupChilds.addLayer (childObject);
}
parentObject.on('click', function(){
if (map.hasLayer(layergroupChilds)) {
\t \t map.removeLayer(layergroupChilds)
\t \t } else {
layergroupChilds.addTo(map);
\t \t }
});
}
layergroupParents.addTo(map);
</script>
</body>
</html>이 문제를 해결할 수있는 방법을 알고 있고 스크립트 2가 스크립트 1에서와 같이 작동하고 있습니까? 작동하려면