宣传单：标记 'mouseclick' 上的自动滚动侧边栏

Question

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

宣传单：标记 'mouseclick' 上的自动滚动侧边栏

Leaflet: Autoscroll sidebar on marker 'mouseclick'

javascript

sidebar

marker

leaflet