单击地图标记时平滑滚动

Question

我有一个显示多个标记的地图，如果单击一个标记，您会转到页面底部的一个 div（经典锚链接）

谁能告诉我为什么当我点击标记时我没有平滑滚动，但如果我只是创建一个链接和一个带有 ID 的 div，我确实有？

这是js：

  jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers
    var markers = [
        ['London Eye, London', 51.503454,-0.119562, '#1'],
        ['Palace of Westminster, London', 51.499633,-0.124755, '#2']
    ];



    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            url: markers[i][3]
        });



       google.maps.event.addListener(marker, 'click', function() { 
       window.location.hash = this.url;
    }); 
            $(document).ready(function(){
                $('a[href^="#"]').on('click',function (e) {
                    e.preventDefault();

                    var target = this.hash,
                    $target = $(target);

                    $('html, body').stop().animate({
                        'scrollTop': $target.offset().top
                    }, 900, 'swing', function () {
                        window.location.hash = target;
                    });
                });
            });



        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });

}

Answer 1

我猜'juping'是由这段代码引起的：

google.maps.event.addListener(marker, 'click', function() { 
   window.location.hash = this.url;
});

移除你的事件监听器：

google.maps.event.addListener(marker, 'click', function() {

还有这个：

$(document).ready(function(){
   $('a[href^="#"]').on('click',function (e) {

并添加这段代码，它将通过marker.url 数据获取html标签并动画滚动到它们：

google.maps.event.addListener(marker, 'click', function() {
    var elem = $(marker.url);
    $('html, body').animate({
              scrollTop: elem.offset().top
      }, 1000 );
});

它会平滑滚动到您的 div：

<div id='1'>1</div>
<div id='2'>2</div>

演示小提琴：http://jsfiddle.net/o8u13whg/

编辑：关闭修复

评论中描述的问题：我刚刚注意到，现在它总是会向下滚动到最后一个 ID...无论您单击什么标记。 是由于 closures 不存在handled properly，导致总是last marker.url滚动到。

要修复它，请将 click 事件从 for 循环中拉出：

for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0],
        url: markers[i][3]
    });
    attachClickHandler(marker);
    .....

然后在 attachClickHandler(marker) 函数中执行滚动魔术：

function attachClickHandler(marker){
     google.maps.event.addListener(marker, 'click', function() {

     var elem = $(marker.url);
    $('html, body').animate({
              scrollTop: elem.offset().top
      }, 1000 );

});
}

演示小提琴：http://jsfiddle.net/o8u13whg/3/

闭包可能是一件棘手的事情:)