Question

我想在地图上放置几个标记，这些标记由＆＃34; parent＆＃34;标记和＆＃34; child＆＃34;标记。所有父标记应该在地图上同时可见，而如果点击特定的父标记，则应打开/关闭特定父标记的子标记

我创建了以下工作示例来演示：

＆＃13;

<!DOCTYPE html>
<html>
<head>	
	<title>Test 1</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.1/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)) {
	    map.removeLayer(layergroupChilds1)
    } else {
        layergroupChilds1.addTo(map);
	}
});

parent2.on('click', function(){
    if (map.hasLayer(layergroupChilds2)) {
	    map.removeLayer(layergroupChilds2)
    } else {
        layergroupChilds2.addTo(map);
	}
});

</script>
</body>
</html>

＆＃13;

由于我想显示相当多的标记，我想将标记的属性放入数组（＆＃34; markerArray＆＃34;）并在For-Loops的帮助下处理其标记：

＆＃13;

<!DOCTYPE html>
<html>
<head>	
	<title>Test 2</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.1/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)) {
		    map.removeLayer(layergroupChilds)
		} else {
            layergroupChilds.addTo(map);
		}
    }); 


}
layergroupParents.addTo(map);

</script>
</body>
</html>

＆＃13;

如果您执行这些脚本，您会看到，在分配个人“点击”时出现了一些问题。每个父母标记的事件。现在，即使我点击第一个父标记，也会打开/关闭最后一个父标记的子标记。

您是否知道如何解决这些问题，而脚本2的工作方式与脚本1相似？

Answer 1

要使其工作，您必须将子项附加到父项（使用javascript属性）

var layergroupChilds = L.layerGroup();
parentObject.layergroupChilds = layergroupChilds;

当父级收到点击时，您可以在事件e中找到父对象，从而找到其子级。

parentObject.on('click', function(e){
    if (map.hasLayer(e.target.layergroupChilds)) {
        map.removeLayer(e.target.layergroupChilds)
    } else {
        e.target.layergroupChilds.addTo(map);
    }
});

以下是您的code更正

Leaflet：在For循环中创建单独的事件侦听器

1 个答案: