单击标记滚动到侧边栏项目时如何制作？答案

【问题标题】：How make when click marker scroll to sidebar item?单击标记滚动到侧边栏项目时如何制作？
【发布时间】：2016-07-12 03:16:35
【问题描述】：

我想要，当用户点击标记时，侧边栏滚动用户点击的项目..like this web https://googlemaps.github.io/js-store-locator/examples/places.html ....但是怎么做呢？任何想法谢谢..

此 div 带有地图 ID 和侧边栏 ID。

 <div style="width:100%; height:100vh;padding-bottom: 50px; ">
    <div id="map" style="top:50px;height:100%;width:80%;float:left"></div>
    <div id="side_bar" style="top:50px;width:20%;float:left;overflow-y: scroll; height:100%;margin-top:50px;padding:20px"></div> 
</div><!-- Map Ends display -->

从 php 数据添加信息窗口点击并在侧边栏 ID 中添加项目

     // Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        map: map,
        visible: true,
        animation: google.maps.Animation.DROP,
        icon : icons[locations[i][4]],                  
      });

    // Event that closes the Info Window with a click on the map
    google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });      

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][1]);
      infowindow.open(map, marker);
    }
    })(marker, i));   

    markers.push(marker);

    var side_bar_html = "<a href='javascript:google.maps.event.trigger(markers["+parseInt(markers.length-1)+"],\"click\");'style='text-decoration:none;'>"+locations[i][0]+"</a><br><hr><br>";
     document.getElementById('side_bar').innerHTML += side_bar_html;

   }

【问题讨论】：

您需要的所有代码都在链接页面上。阅读它
你好 @RachelGallen 是的，你能从我的代码中帮助我吗...因为当我关注页面时，我的代码错误..谢谢
您的代码与给出的示例完全不同。在示例中，您还可以单击标记。如果你想让项目滚动，给侧边栏一个固定的高度和overflow-y:scroll;
@RachelGallen 是的，我添加了 overflow-y:scroll;关于风格...我像这个链接 link 一样编辑样本。谢谢
太棒了！看起来很棒。随意支持我的答案之一:)

标签： javascript jquery html css google-maps-api-3

【解决方案1】：

我找到了解决方案。我加了这个

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][1]);
      infowindow.open(map, marker);

       var no = marker.id;

      $("div[class*='item']").removeClass("active");
      $('div[class*=item_'+no+']').addClass("active");

      var $selectedLocation = $('div[class*=item_'+no+']' );  
      var $container = $('#side_bar');
      $container.animate({
        scrollTop: $selectedLocation.offset().top - $container.offset().top + $container.scrollTop()
      }); 
    }
    })(marker, i));

并添加到我的 id 标记

【讨论】：