Question

我有各种网站的geojson文件。该文件包含站点名称信息和地址详细信息。

虽然我能够显示所有制作者，但我不确定如何在标记的弹出窗口中显示属性数据。

如何为每个标记显示不同的信息？目前，我的所有标记都显示为“Hello World＆＃34;

”

我已将我的代码包含在

之下

<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>

Answer 1

这是我的回答。

    <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>

Leaflet - 弹出多个标记的内容

1 个答案: