2017-07-06 6 views
1

ファイルからgeojsonデータを読み込み、circleMarkersを表示するjacascriptコードがあります(ポップアップが機能しないため、通常のマーカーは表示できません)。リーフレットマーカークリック時の表示データdiv内

{ 
    $.ajax({ 
    dataType: "json", 
    type: 'POST', 
    url: "geojsonfile.php", 
    beforeSend: function() {}, 
    success: function(data) { 
     display = L.geoJson(data, { 
     style: function(feature) { 
      return { 
      color: '#0515B5' 
      }; 
     }, 
     pointToLayer: function(feature, latlng) { 
      return new L.CircleMarker(latlng, { 
      radius: 6, 
      fillOpacity: 0.85 
      }); 
     }, 
     onEachFeature: function(feature, layer) { 
      layer.bindPopup("Name: " + feature.properties.name); 
      document.getElementById("sname").innerHTML = feature.properties.name; 
      layer.on({ 
      click: showData 
      }); 

     } 
     }).addTo(map); 

    } 
    }).error(function(xhr, status, error) { 
    console.log(error); 
    }); 

} 

function showData(e) { 
    $("#sdata").show(); 
} 

データが表示されるHTMLテーブルは

<table id="sdata"> 
    <tbody> 
    <tr> 
     <td> Name:</td> 
     <td id="sname"></td> 
    </tr> 
    </tbody> 
</table> 

あるしかし、問題はのみにGeoJSONの最後の値がテーブルに表示されている、それが可能であることをマーカーonclickingマーカーのポップアップのようにsnameの値が表示されます。

答えて

0

ポップアップが機能するはずです。ポップアップはレイヤーではなく機能にバインドする必要があります。

ない:

layer.bindPopup("Name: " + feature.properties.name); 

しかし:

feature.bindPopup("Name: " + feature.properties.name); 
関連する問題