Question

我想知道是否有人可以帮助我。

我对JavaScript编程比较陌生，所以请耐心等待。

我已将this页面放在一起，该页面允许用户通过“标记类别”复选框选择添加或删除Google地图标记。除了在地图中添加和删除相关标记之外，还会在“边栏”中添加或删除每个标记的说明。以橙色文字显示。

如果用户点击“补充工具栏”项，则会显示相关标记的信息窗口，如果选择了标记，则侧栏列表中的相关说明将以灰色背景突出显示。

我遇到的问题是，如果用户在地图上选择标记，则侧边栏不会自动滚动到项目相关列表项目，如this页面上的示例所示。

我使用第三方脚本创建滚动条，如下面的代码所示：

<script>
        (function($){
            $(window).load(function(){
                $("#sidebar").mCustomScrollbar({
                    scrollButtons:{
                        enable:true
                    }
                });
                //ajax demo fn
                $("a[rel='load-content']").click(function(e){
                    e.preventDefault();
                    var $this=$(this),
                        url=$this.attr("href");
                    $.get(url,function(data){
                        $("#sidebar .mCSB_container").html(data); //load new content inside .mCSB_container
                        $("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly loaded content
                        $("#sidebar").mCustomScrollbar("scrollTo","top"); //scroll to top
                    });
                });
                $("a[rel='append-content']").click(function(e){
                    e.preventDefault();
                    var $this=$(this),
                        url=$this.attr("href");
                    $.get(url,function(data){
                        $("#sidebar .mCSB_container").append(data); //append new content inside .mCSB_container
                        $("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly appended content
                    });
                });
            });
        })(jQuery);
</script>

这是链接地图标记和侧边栏项的代码部分。

google.maps.event.addListener(marker, 'click', function() { 
  infowindow.setContent(contentString);
  $("#sidebar a").css('background-color','');//remove sidebar links back colors
  sidebarlink = $("#sidebar a:contains('"+marker.mydescription+"')");
  sidebarlink.css('background-color','#DADADA');
  infowindow.open(map,marker); 
});

我试图在这两个区域放置一个overflow项目，希望这可以解决问题。另外，我还省略了以下几行，看看我是否能想出一个解决方案：

$("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly loaded content                          
$("#sidebar").mCustomScrollbar("scrollTo","top"); //scroll to top

不幸的是，我的尝试还没有解决问题。

我只是想知道某人是否能够看到这个并让我知道我哪里出错了。

非常感谢和亲切的问候

Answer 1

只需将以下行添加到标记点击事件处理程序：

$("#sidebar").mCustomScrollbar("scrollTo","a:contains('"+marker.mydescription+"')");

所以你的代码看起来像是：

google.maps.event.addListener(marker, 'click', function() { 
  infowindow.setContent(contentString);
  $("#sidebar a").css('background-color','');//remove sidebar links back colors
  sidebarlink = $("#sidebar a:contains('"+marker.mydescription+"')");
  sidebarlink.css('background-color','#DADADA');
  $("#sidebar").mCustomScrollbar("scrollTo","a:contains('"+marker.mydescription+"')");
  infowindow.open(map,marker); 
});

应滚动到您点击的项目。

Answer 2

尝试在事件处理函数中添加一行：

google.maps.event.addListener(marker, 'click', function() { 
//......
  map.setCenter(marker.getPosition()); // <---Add this line
  infowindow.open(map,marker); 
});

自动滚动侧栏项

2 个答案: