代码之家 › 专栏 › 技术社区 › Elton Santos

根据使用传单单击的标记更改边栏上的信息

geojson leaflet onclick json javascript

Elton Santos · 技术社区 · 6 年前

我很难完成一个项目,因为无法根据通过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);

使用它,我可以显示标记,但当我单击任何一个并更改侧边栏的信息时,我无法继续。我知道的逻辑,但由于缺乏知识,我无法实现:( 我为基本的怀疑感到抱歉,但这次你能帮我吗?谢谢!!

1 回复 | 直到 6 年前

deevee 6 年前

添加处理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);
  });
}

工作示例 在代码笔上: https://codepen.io/dagmara223/pen/BVBGKG

推荐文章

Sejal Gupta · 叶绿体不显色

2 年前

xd1936 · 在Google Apps Script 500中获取NWS API时出错

7 年前

SadikAli · 从MultiPolygon WKT解析时,SQL server+management studio(2014)中出现错误的空间结果

7 年前

user5834454 · 将CSV转换为GeoJSON的Python脚本

7 年前

rapsak · 如何将featurecollection筛选到可与path一起使用的对象。边界()

7 年前

abaporu · 修改规范示例时,我的topojson不会显示

7 年前

IHaveAQuestion · 添加到google地图的样式功能

7 年前

ShinkenDT · 传单geojson更新可拖动状态或标记

7 年前

Christian Conroy · 在多个geojson文件上运行分析

7 年前

Tamir Hazan · 从asp嵌入在线数据库。net在谷歌地图上

7 年前