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

宣传单：在标记上自动滚动侧栏＆＃39;鼠标点击＆＃39;

1 个答案: