1

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

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

我整理了这个页面，它允许用户通过“标记类别”复选框选择添加或删除谷歌地图标记。除了在地图中添加和删除相关标记外，每个标记的描述也会从“侧边栏”中添加或删除；以橙色文本显示。

如果用户单击“侧边栏”项目，将显示相关标记的信息窗口，如果选择了标记，侧边栏列表中的相关描述将以灰色背景突出显示。

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

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

<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

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

我只是想知道是否有人可以看看这个，让我知道我哪里出错了。

非常感谢和亲切的问候

4

2 回答 2

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

应该滚动到您单击的项目。

于 2012-10-07T23:08:04.910 回答
0

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

google.maps.event.addListener(marker, 'click', function() { 
//......
  map.setCenter(marker.getPosition()); // <---Add this line
  infowindow.open(map,marker); 
});
于 2012-09-30T06:22:58.573 回答