从html-markup

Question

我正在寻找一种方法，从网站上的html内容生成传单标记。

我得到了这个html-markup：

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

<div id="content">

<div class="mark">
    <h3>Mark #1</h3>
    <span class="title">Lorem Ipsum Dolor</span><br>    
    <span class="lat">53.922429</span><br>  
    <span class="lng">9.682042</span><br>   
</div> 

<div class="mark">
    <h3>Mark #1</h3>
    <span class="title">Consetetur sadipscing elitr</span><br>  
    <span class="lat">53.642978</span><br>  
    <span class="lng">10.613895</span><br>  
</div>      

<div class="mark">
    <h3>Mark #1</h3>
    <span class="title">Sed diam nonumy</span><br>  
    <span class="lat">53.146250</span><br>  
    <span class="lng">9.666947</span><br>   
</div> 

</div>

现在我喜欢从这个标记生成的标记，就像我附加了这个脚本一样：

<script>

L.mapbox.accessToken = '<myAccessToken>';
var map = L.mapbox.map('map', '<myAccessID>').setView([51, 10], 6);
var cssIcon01 = L.divIcon({className: 'css-icon01',iconSize: [14, 14]});

L.marker([53.922429, 9.682042], {icon: cssIcon01, title: 'Lorem Ipsum Dolor'}).addTo(map);
L.marker([53.642978, 10.613895], {icon: cssIcon01, title: 'Consetetur sadipscing elitr'}).addTo(map);
L.marker([53.146250, 9.666947], {icon: cssIcon01, title: 'Sed diam nonumy'}).addTo(map);

</script>

标记应该动态生成，这样我就可以添加尽可能多的标记。我想会有变量和一些foreach-script，但我不知道从哪里开始。

Answer 1

执行您所描述的内容时不应有任何特殊困难，特别是因为您似乎计划使用jQuery。

1. 使用div课程检索所有"mark"：var $marks = $(".mark")
2. 创建一个迭代函数并将其应用于each找到的节点：$marks.each(myFunction)

3. 在myFunction(indexInArray, mark)内，检索特定于标记的数据：

   • 标题：var title = $(".title", mark).text()
   • 纬度：var lat = parseFloat($(".lat", mark).text())
   • 经度：var lng = parseFloat($(".lng", mark).text())

4. 建立您的标记：L.marker([lat, lng], {icon: cssIcon01, title: title}).addTo(map)

Answer 2

非常感谢您的建议！它让我走上了正确的道路，但我仍然做错了什么。这就是我现在所拥有的：

<div id="content">
        <div class="mark">
            <h3>Mark #1</h3>
            <span class="title">Lorem Ipsum Dolor</span><br>    
            <span class="lat">53.922429</span><br>  
            <span class="lng">9.682042</span><br>   
        </div> 

        <div class="mark">
            <h3>Mark #2</h3>
            <span class="title">Consetetur sadipscing elitr</span><br>  
            <span class="lat">53.642978</span><br>  
            <span class="lng">10.613895</span><br>  
        </div> 

        <div class="mark">
            <h3>Mark #3</h3>
            <span class="title">Sed diam nonumy</span><br>  
            <span class="lat">53.146250</span><br>  
            <span class="lng">9.666947</span><br>   
        </div> 

</div>

<script>

    L.mapbox.accessToken = '<myToken>';
    var map = L.mapbox.map('map', '<myID>').setView([51, 10], 6);   // latitude, longitude, zoom level;  

    var cssIcon01 = L.divIcon({className: 'css-icon01',iconSize: [14, 14]});


    var $marks = $(".mark")
    $marks.each(function() {
            var title = $(".title", mark).text()
            var lat = parseFloat($(".lat", mark).text())
            var lng = parseFloat($(".lng", mark).text())
        L.marker([lat, lng], {icon: cssIcon01, title: title}).addTo(map);
    }

</script>

Answer 3

好的，我摆弄了一些更多的东西，用这个脚本我终于搞定了：

L.mapbox.accessToken = '<myToken>';
var map = L.mapbox.map('map', '<myID>').setView([51, 10], 6);   // latitude, longitude, zoom level;  

var cssIcon01 = L.divIcon({className: 'css-icon01',iconSize: [14, 14]});

$(".mark").each(function() {
        var title = $(this).find(".title").html()
        var lat = $(this).find(".lat").html();
        var lng = $(this).find(".lng").html();
        L.marker([lat, lng], {icon: cssIcon01, title: title}).addTo(map);           
});