Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/csharp/321.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 传单:marker上的Autoscroll侧边栏';鼠标单击';_Javascript_Leaflet_Sidebar_Marker - Fatal编程技术网

Javascript 传单:marker上的Autoscroll侧边栏';鼠标单击';

Javascript 传单:marker上的Autoscroll侧边栏';鼠标单击';,javascript,leaflet,sidebar,marker,Javascript,Leaflet,Sidebar,Marker,map.on('click',onmaclick); MarkerClick上的函数(e){ $('div').removeClass('active'); $('div#'+e.target.\u传单\u id).addClass('active'); for(标记中的变量标记){ 标记[mark].setIcon(smallIcon);} var offset=map.\u getNewTopLeftPoint(例如target.getLatLng()).subtract(map.\u ge

map.on('click',onmaclick);
MarkerClick上的函数(e){
$('div').removeClass('active');
$('div#'+e.target.\u传单\u id).addClass('active');
for(标记中的变量标记){
标记[mark].setIcon(smallIcon);}
var offset=map.\u getNewTopLeftPoint(例如target.getLatLng()).subtract(map.\u getTopLeftPoint());
潘比地图(偏移量);
}
函数onMapClick(e){
var标记=新的L标记(如latlng);
marker.on('click',onMarkerClick);
添加图层(标记);
marker.bindpoop(“marker”);
标记器[标记器.\u传单\u id]=标记器;
$(“#覆盖”)。追加(
“标记器”+标记器。_传单_id+'-);
//删除标记
$('.remove')。打开(“单击”,函数(){
//移除标记
map.removeLayer(markers[$(this.attr('id'));
//移除链接
$(this.parent('div').remove();
});
$('.item')。在(“鼠标悬停”,函数(){
$('div').removeClass('active');
$(this.addClass('active');
for(标记中的变量标记){
标记[mark].setIcon(smallIcon);}
markerFunction($(this.attr('id'))
标记[$(this).attr('id')].setIcon(bigIcon);
var mid=$(this.attr('id');
var LatLng=markers[mid].getLatLng();
var offset=map._getNewTopLeftPoint(LatLng).subtract(map._getTopLeftPoint());
潘比地图(偏移量);
});
}
函数标记函数(id){
标记[id]。openPopup();
}
演示如何将标记添加到侧栏。如果用户悬停在边栏上的任何项目上,标记将自动在地图中间自动跨越。如果用户单击任何标记,侧边栏的项目将高亮显示

但是,如果地图上有大量的标记,如何创建侧栏自动滚动。(例如,当用户单击marker时,可以显示侧边栏上突出显示的项目,而无需手动向下滚动侧边栏以查找侧边栏上突出显示的项目的位置类似于此

我在这里使用了jquery动画:

您需要做的是用一个唯一的id标记侧边栏中的项目,该id将这些项目与相应的标记链接起来

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

是的,类似这样的,但是你的例子比我的例子更复杂。我不知道jquery:(如何编辑小提琴的例子才能像你的一样工作?
<div class="postContent" data-post_id="{{ guid }}">
</div>
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
   });
}