создавать маркеры буклетов из html-markup

Question

Я ищу способ создания буклетов-маркеров из html-контента на веб-сайте.

Я получил эту HTML-разметку:

<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 «S с "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);   
});