我很难完成一个项目,因为无法根据单击标记根据通过 json 获得的数据更改侧边栏中的信息。我的代码是:
基本的 json:
paradas = {
"type" : "FeatureCollection",
"name" : "paradas",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features" : [
{
"type" : "Feature",
"properties" : {
"nome" : "Parada 1",
"imagem" : "<img src='1.jpg' alt='maptime logo gif' width='350px'/>",
"descricao" : "Test."
},
"geometry" : {
"type" : "Point",
"coordinates" : [
-38.55222702026367,
-3.7864725817550275
]
}
},
(... repeat json)
我的侧边栏html:
<div class="sidebar">
<div class="nome"></div>
<div class="imagem"></div>
<div class="descricao"></div>
</div>
我的JS:
var rotas = L.geoJSON(paradas, {
}).addTo(map);
有了它,我可以显示标记,但当我单击任何内容并更改侧边栏的信息时,我无法继续。我知道的逻辑,但由于缺乏知识我无法实现:( 对于基本的疑问,我很抱歉,但是这次你能帮我吗?谢谢!!
最佳答案
您应该添加处理 onEachFeature 点击的函数。假设您使用的是 jquery(最简单的解决方案):
var rotas = L.geoJSON(paradas, {
onEachFeature: onEachFeature
}).addTo(map);
function onEachFeature(feature, layer) {
layer.on('click', function(e) {
$(".nome").html(feature.properties.nome);
$(".imagem").html(feature.properties.imagem);
$(".descricao").html(feature.properties.descricao);
});
}
codepen 上的
关于javascript - 根据使用 Leaflet 单击的标记更改侧边栏上的信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50571549/