Javascript 小叶分离div元素相互作用

我现在正在为这种互动而挣扎，在这个问题上找到正确的解决方案是一项相当困难的任务（目前）

因此，我使用GeoJSON格式（使用PHP和MySQL创建）创建了一些基本点的地图。我想知道，有没有可能在单独的div元素中，在地图外，显示重新编码的点

例如：

我的问题是？ 当我从右边点击列表时，是否可能自动打开地图上相同的点击元素？（如上图所示）

下面是我用来生成map和GeoJSON的代码，但它只在map面板上生成点

var karta = L.tileLayer.wms("http://geoportal.dgu.hr/wms?", {
        layers: 'DOF', // možemo još dodati slojeve za 'TK25', 'DOF', 'HOK'
        attribution: "http://geoportal.dgu.hr/ "
});

rasvjeta_kvar_hum = new L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
  return L.marker(latlng, {
    icon: L.icon({
        iconUrl: "img/poweroutage_1.png",
        iconSize: [20, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      })
  });
},
onEachFeature: function (feature, layer) {
if (feature.properties) {
  var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Šifra trafostanice</th><td>" + feature.properties.ts_sifra + 
      "</td></tr>" + "<tr><th>Naziv trafostanice</th><td>" + feature.properties.ts_naziv + "</td></tr>" +  
      "<tr><th>Kod lampe</th><td>" + feature.properties.sifra_lampe + "</td></tr>" +
      "<tr><th>Tip/snaga lampe</th><td>" + feature.properties.tip_lampe + "</td></tr>" +
      "<tr><th>Vrsta stupa</th><td>" + feature.properties.vrsta_stupa + "</td></tr>" +
      "<tr><th>Naziv naselja</th><td>" + feature.properties.naziv_naselja + "</td></tr>" +
      "<tr><th>Adresa</th><td>" + feature.properties.adresa + "</td></tr>" 
      "</table>";
layer.bindPopup(content);}}
});

$.getJSON("php/rasvjeta_kvar.php", function (data) {
    rasvjeta_kvar_hum.addData(data);
  });


var map = L.map('map', {
    center: [46.205481, 15.666011],
    zoom: 14,
    layers: [karta, rasvjeta_kvar_hum]
  });

var baseLayers = {
    "Podloga": karta
  };

  var overlays = {
    "Rasvjetna tijela": rasvjeta_kvar_hum
  };

  L.control.layers(baseLayers, overlays,{
    collapsed: false
  }).addTo(map);

当我尝试使用以下代码循环使用GeoJSON时

let people = $.getJSON("php/rasvjeta_150n.php", function (data) {
});

而不是从上面阻止，我得到这个错误消息

Uncaught TypeError: people.forEach is not a function

下面是从MySQL生成GeoJSON的PHP代码：

更新II

在同伴的帮助下，我成功地在外部项目和地图标记之间创建了一些交互。但当我单击外部列表中的元素时，它只会在同一标记上缩放我。我希望（如果可能的话）在单击外部列表中的项目时，在地图上的同一标记上缩放我

图片：

如果我点击代码为H12的列表，它会在地图上使用不同代码的地图标记上缩放我。

代码如下：

function goTo(layer) {
    map.panTo(layer.getLatLng());
    layer.openPopup();
}

$.getJSON("php/rasvjeta_kvar.php", function(data) {
    geojson = L.geoJson(data, {
        pointToLayer: function(feature, latlng) {
            return L.marker(latlng, {
                icon: L.icon({
                    iconUrl: "img/power_red.png",
                    iconSize: [20, 28],
                    iconAnchor: [12, 28],
                    popupAnchor: [0, -25]
                }),
                title: feature.properties.sifra_lampe,
                riseOnHover: false,
                riseOffset: 100
            });
        },
        onEachFeature: function(feature, layer) {
            layer.bindPopup(feature.properties.tip_lampe +
                "<br>" + feature.properties.adresa + " u m<sup>2</sup>");

            $("#list").append('<a href="#" class="list-group-item">' + layer.feature.properties.sifra_lampe + ' - ' + layer.feature.properties.ts_sifra + '</a>');

            list.addEventListener("click", function() {
                goTo(layer);
            });
        }
    });
    geojson.addTo(map);
});

功能转到（层）{
map.panTo（layer.getLatLng（））；
layer.openPopup（）；
}
$.getJSON（“php/rasvjeta_kvar.php”，函数（数据）{
geojson=L.geojson（数据{
pointToLayer：功能（特性、latlng）{
返回L.标记（板条{
图标：L.icon({
iconUrl:“img/power\u red.png”，
iconSize:[20,28]，
iconAnchor:[12,28]，
popupAnchor:[0，-25]
}),
标题：feature.properties.sifra_lampe，
riseOnHover:false，
上升偏移量：100
});
},
onEachFeature：功能（功能，图层）{
layer.bindPopup（feature.properties.tip_lampe+
“
”+feature.properties.adresa+u m2”）；
$（“#列表”）。追加（“”）；
addEventListener（“单击”，函数（）{
后藤（层）；
});
}
});
geojson.addTo（map）；
});

一种方法是将新弹出窗口绑定到地图上的同一位置

function openPopup(elementRightSide){
   L.popup() 
            .setLatLng(elementRightSide.lat, elementRightSide.lng])
            .setContent(elementRightSide.content)
            .openOn(map);
}

---

您描述的是一个常见的用例。我非常确定应该有足够的资源（特别是在这样的情况下）提供相同的功能

至于您报告的

TypeError

，请注意jQuery返回的是

jqXHR

对象，而不是数组

至于实现您的功能，您已经知道可以通过

L.GeoJSON

constructor选项为每个GeoJSON功能执行指令。因此，为什么不简单地在其中构建列表项，而不是尝试分别解析

人员

数组？这实际上就是您的代码所做的，通过在

#feature list

表中添加新行

这种方法的最大优点是，您可以直接将外部项“单击”事件侦听器链接到适当的层/标记，因为它可以作为

onEachFeature

函数的参数使用：

功能转到（层）{
map.panTo（layer.getLatLng（））；
layer.openPopup（）；
}
L.geoJSON（空{
onEachFeature：功能（功能，图层）{
//无论你想添加到你的图层。
//构建您的外部项。
//然后附加“单击”事件侦听器。
item.addEventListener（“单击”），函数（）{
后藤（层）；
});
}
});

@ghybs..谢谢你的回答！我有一种感觉，在你的帮助下，我离你更近了！我现在在外部项目和标记之间的交互方面遇到了问题…我将使用代码更新答案，以便于解释。。。我将接受回答您的

列表是什么？在我看来，您将事件侦听器绑定到同一个元素，因此所有侦听器都被执行，最后一个侦听器“获胜”。如果您正确地将侦听器连接到每个项目，它应该可以工作。演示：顺便说一句，如果您想避免附加多个侦听器（每个项目一个），您可以委托到容器列表，但您必须在项目中嵌入一个id（例如，使用dataset或jQuery的
.data（）
），在事件侦听器中检索该id，然后检索相应的标记。通过使用jQuery的
data（）
，我认为您还可以直接嵌入标记，因此不需要构建标识到标记的映射。
Uncaught TypeError: people.forEach is not a function

function goTo(layer) {
    map.panTo(layer.getLatLng());
    layer.openPopup();
}

$.getJSON("php/rasvjeta_kvar.php", function(data) {
    geojson = L.geoJson(data, {
        pointToLayer: function(feature, latlng) {
            return L.marker(latlng, {
                icon: L.icon({
                    iconUrl: "img/power_red.png",
                    iconSize: [20, 28],
                    iconAnchor: [12, 28],
                    popupAnchor: [0, -25]
                }),
                title: feature.properties.sifra_lampe,
                riseOnHover: false,
                riseOffset: 100
            });
        },
        onEachFeature: function(feature, layer) {
            layer.bindPopup(feature.properties.tip_lampe +
                "<br>" + feature.properties.adresa + " u m<sup>2</sup>");

            $("#list").append('<a href="#" class="list-group-item">' + layer.feature.properties.sifra_lampe + ' - ' + layer.feature.properties.ts_sifra + '</a>');

            list.addEventListener("click", function() {
                goTo(layer);
            });
        }
    });
    geojson.addTo(map);
});

function openPopup(elementRightSide){
   L.popup() 
            .setLatLng(elementRightSide.lat, elementRightSide.lng])
            .setContent(elementRightSide.content)
            .openOn(map);
}