1

誰かが私を助けてくれるのではないかと思います。

私は JavaScript プログラミングに比較的慣れていないので、しばらくお待ちください。

このページをまとめました。ユーザーは [マーカー カテゴリ] チェック ボックスを選択して、Google マップ マーカーを追加または削除できます。関連するマーカーがマップに追加およびマップから削除されることに加えて、各マーカーの説明が「サイドバー」に追加または削除されます。これはオレンジ色のテキストで示されています。

ユーザーが「サイドバー」項目をクリックすると、関連するマーカーの情報ウィンドウが表示され、マーカーが選択されると、サイドバー リストの関連する説明が灰色の背景で強調表示されます。

私が抱えている問題は、ユーザーがマップ上のマーカーを選択した場合、このページの例に示すように、サイドバーがアイテムに関連するリスト アイテムに自動的にスクロールしないことです。

以下のコードに示すスクロール バーを作成するためにサード パーティのスクリプトを使用しています。

<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

イベント ハンドラ関数に 1 行追加してみてください。

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