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

我猜＆＃39; juping＆＃39;是由这段代码引起的：

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 ...无论你点击什么标记。是由{{3>引起的不是closures，导致始终最后 marker.url滚动到。{/ p>

要解决此问题，请将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 );

});
}

演示小提琴：handled properly

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

单击地图标记时平滑滚动

1 个答案:

编辑：关闭修复