Javascript 单击地图标记时平滑滚动_Javascript_Jquery_Google Maps_Google Maps Api 3

Javascript 单击地图标记时平滑滚动

javascript jquery google-maps google-maps-api-3

Javascript 单击地图标记时平滑滚动,javascript,jquery,google-maps,google-maps-api-3,Javascript,Jquery,Google Maps,Google Maps Api 3,我有一个显示多个标记的地图，如果单击一个标记，您将转到页面底部的一个div（经典锚链接）有人能告诉我为什么我点击marker时没有平滑滚动，但如果我只是创建一个带有ID的链接和div，我就有了平滑滚动吗这是js： jQuery(function($) { // Asynchronously Load the map API var script = document.createElement('script'); script.src = "http://ma

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

有人能告诉我为什么我点击marker时没有平滑滚动，但如果我只是创建一个带有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);
    });

}

jQuery（函数（$）{
//异步加载映射API
var script=document.createElement（'script'）；
script.src=”http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild（脚本）；
});
函数初始化（）{
var映射；
var bounds=new google.maps.LatLngBounds（）；
变量映射选项={
mapTypeId:“路线图”
};
//在页面上显示地图
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
地图.设置倾斜（45）；
//多重标记
变量标记=[
[伦敦眼，伦敦，51.503454，-0.119562，#1']，
[伦敦威斯敏斯特宫，51.499633，-0.124755，#2']
];
//在地图上显示多个标记
var infoWindow=new google.maps.infoWindow（），marker，i；
//在我们的标记阵列中循环并将每个标记放置在地图上
对于（i=0；i

我猜“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>

然后在

attachClickHandler（marker）

函数中执行滚动魔术：

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

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

});
}

演示小提琴：

闭包可能是一件棘手的事情：）

我想“juping”是由以下代码引起的：

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