Изменить информацию на боковой панели в соответствии с маркером, щелкнувшим с помощью Leaflet - PullRequest
Новая
       17

Изменить информацию на боковой панели в соответствии с маркером, щелкнувшим с помощью Leaflet

0 голосов
/ 28 мая 2018

Мне трудно завершить проект из-за невозможности изменить информацию в моей боковой панели в соответствии с данными, полученными с помощью json, в соответствии с выбранным маркером.Является ли мой код:

basic 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 Ответ

0 голосов
/ 29 мая 2018

Вы должны добавить функцию, которая обрабатывает каждый щелчок мышью .Предполагается, что вы используете 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: https://codepen.io/dagmara223/pen/BVBGKG

...