リーフレット：マーカーのオートスクロールサイドバー「マウスクリック」

Question

Example on Fiddle

map.on('click', onMapClick); 
function onMarkerClick(e) { 
$('div').removeClass('active'); 
$('div #' + e.target._leaflet_id).addClass('active'); 
for (var mark in markers){ 
     markers[mark].setIcon(smallIcon);} 
var offset = map._getNewTopLeftPoint(e.target.getLatLng()).subtract(map._getTopLeftPoint()); 
map.panBy(offset); 
} 

function onMapClick(e) { 
var marker = new L.Marker(e.latlng); 
marker.on('click', onMarkerClick); 
map.addLayer(marker); 
marker.bindPopup("Marker"); 
markers[marker._leaflet_id] = marker; 
$('#overlay').append(
'<div class="item" id="' + marker._leaflet_id + '">Marker ' + marker._leaflet_id + ' - <a href="#" class="remove" id="' + marker._leaflet_id + '">remove</a></div>'); 

// Remove a marker 
$('.remove').on("click", function() { 
    // Remove the marker 
    map.removeLayer(markers[$(this).attr('id')]); 

    // Remove the link 
    $(this).parent('div').remove(); 
}); 

$('.item').on("mouseover", function() { 
    $('div').removeClass('active'); 
    $(this).addClass('active'); 
    for (var mark in markers){ 
     markers[mark].setIcon(smallIcon);} 
    markerFunction($(this).attr('id')) 
    markers[$(this).attr('id')].setIcon(bigIcon); 
    var mid = $(this).attr('id'); 
    var LatLng = markers[mid].getLatLng(); 
    var offset = map._getNewTopLeftPoint(LatLng).subtract(map._getTopLeftPoint()); 
map.panBy(offset); 
    }); 
} 

function markerFunction(id){ 
    markers[id].openPopup(); 
} 

は、サイドバー上にマーカーを追加する方法を示しています。ユーザーがサイドバーのアイテムにカーソルを合わせると、地図の中央にマーカーが自動的に表示されます。ユーザーがマーカーをクリックすると、サイドバーの項目が強調表示されます。

ただし、地図上にマーカーがたくさんある場合、サイドバーの自動スクロールを行うにはどうすればよいですか。 （例えば、サイドバー上のハイライト表示された項目は、手動でサイドバー上の強調表示された項目は、このような

Answer 1

何か？http://franceimage.github.io/map/

である私は、ここでjqueryのアニメーションを使用場所を見つけるためにサイドバーを下にスクロールすることなく、マーカーのときに、ユーザーのクリックを示すことができます：https://github.com/franceimage/franceimage.github.io/blob/master/map/explore.js#L458は

何をする必要があると、それに対応するマーカーとそれらをつなぐユニークなIDを使用して、サイドバーにあるアイテムにタグ付けすることである

<div class="postContent" data-post_id="{{ guid }}"> 
</div> 

マーカーがあるとき。対応するアイテムを探してスクロールする必要があります。それはjQueryが便利なところですが、あなたは私が推測する別の方法でそれを行うことができます。

var container = $("html,body"); 
var padding = parseInt($("#page").css("padding-top")) + parseInt($(".postContent").css("margin-top")); 
var scrollTo = $("div.postContent[data-post_id=" + selectedPostId + "]"); 

if(scrollTo.offset()) { 
    container.animate({ 
     scrollTop: scrollTo.offset().top - padding 
    }); 
}