は、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スクリプトが関わっていると思いますが、私はどこから始めるべきではありません。

Answer 1

特に、jQueryの使用を計画しているようだから、あなたが何を記述するのに特別な問題はないはずです。

1. は"mark"クラスにすべてのあなたのdiv年代を取得：var $marks = $(".mark")
2. は、反復関数を作成し、eachたノードに適用します：myFunction(indexInArray, mark)インサイド$marks.each(myFunction)

3. 、マーカーに特異的データを取得する：

   • タイトル：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

OK、私は私が最終的にそれが働いてしまったいくつかのより多くのと、このスクリプトで周りいじっ：

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);   
});