小冊子 - 彈出多個標記的內容

我有一個用於各種網站的geojson文件。該文件具有網站名稱信息和地址詳細信息。小冊子 - 彈出多個標記的內容

雖然我能夠顯示我所有的製造商，但我不確定如何在彈出的標記上顯示屬性數據。

如何顯示每個標記的不同信息？目前我所有的標誌顯示的「Hello World」

我已經包含下面

<head> 
    <!-- title --> 
    <title>Sky Fibre Network</title> 

    <!-- Reference the Leaflet CSS and JavaScript Files --> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 

    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 

    <div id="map"></div> 

    <style> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0;} 
     #map{ height: 100% } 

    </style> 

    <script src="data/sites.geojson"></script> 
</head> 

<!-- Webmap contents --> 
<body> 

    <script> 


     <!-- long and lat for UK & Zoom level for whole of UK --> 
     var map = L.map('map',{ center:[54.038486, -1.948915], zoom: 5}); 

     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
     }).addTo(map); 

     var sitesLayer = L.geoJson(sites).addTo(map); 
     sitesLayer.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup(); 
    </script> 


</body>

來源

2017-05-26 Sukh_Internazionale

您可能正在尋找[使用GeoJSON的用單張]（http://leafletjs.com/examples/geojson/），部分'onEachFeature' – ghybs

謝謝，我已經實現了我想要的東西，但不知道如何在我的回覆中張貼代碼。 –

您應該可以填寫下面的_answer_。用4個空格縮進代碼，它會自動格式化。 – ghybs

這裏是我的回答傢伙我的代碼。

<script>  
     <!-- long and lat for UK & Zoom level for whole of UK --> 
     var map = L.map('map',{ center:[54.038486, -1.948915], zoom: 5}); 

     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
     }).addTo(map); 


     function siteslabels (feature, layer){ 
     layer.bindPopup("<p class='info header'>"+ 
     "<b>" + feature.properties.SITE + "</b>" + 
     "</br>" + feature.properties.Address1 + 
     "</br>" + feature.properties.Address2 + 
     "</p>"); 
     }; 

     L.geoJson(sites,{ 
      onEachFeature: siteslabels 
     }).addTo(map); 

    </script>

來源

2017-05-30 07:22:25

小冊子 - 彈出多個標記的內容

回答

相關問題