2014-02-25 73 views
0

我有一个谷歌地图有标记,当点击去同一页面内的#anchor标记。一切工作正常我只是喜欢当标记点击锚不跳,但顺利滚动。有什么办法可以做到这一点?window.location光滑滚动

<script> 

    var maps; 
    function initialise() 
    { 



    var stylez = [ 
    { 
     featureType: "all", 
     elementType: "all", 
     stylers: [ 

     { saturation: -100 } // <-- THIS 
     ] 
    } 
]; 

    var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(10.628216,-61.301394), 
    mapTypeControlOptions: { 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz'] 
} 

    } ; 
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);  
var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });  
map.mapTypes.set('tehgrayz', mapType); 
map.setMapTypeId('tehgrayz');  


    // -------------- MARKER 1 
    var marker1 = new google.maps.Marker({ 
    position: new google.maps.LatLng(10.658562,-61.522754), 
    map: map, 
    icon: 'images/mapicon.png' 
    }); 


    // MARKER 1'S INFO WINDOW 

    var infowindow1 = new google.maps.InfoWindow({ 
    content: 'University of Trinidad and Tobago <br />John Donaldson Campus<br />' 
    }); 
    // End of infowindow code 


     google.maps.event.addListener(marker1, 'click', function() { 
    infowindow1.open(map, marker1); 
    window.location = "#uttjdc"; 

}); 


    // -------- END OF 1st MARKER 


    // -------------- MARKER 2 
    var marker2 = new google.maps.Marker({ 
    position: new google.maps.LatLng(10.267817,-61.465055), 
    map: map, 
    icon: 'images/mapicon.png' 
    }); 

    // MARKER 2'S INFO WINDOW 
    var infowindow2 = new google.maps.InfoWindow({ 
    content: 'National Academy for the Performing Arts<br /> South Campus<br />' 
    }); 
    // End of infowindow code 

    // Adding a click event to the marker 
    google.maps.event.addListener(marker2, 'click', function() { 
    // Calling the open method of the infoWindow 
    infowindow2.open(map, marker2); 
    window.location = "#uttsapa"; 
    }); 
    // -------- END OF 2nd MARKER 


    // -------------- MARKER 3 
    var marker3 = new google.maps.Marker({ 
    position: new google.maps.LatLng(11.18257,-60.739463), 
    map: map, 
     icon: 'images/mapicon.png' 

    }); 

    // MARKER 3'S INFO WINDOW 
    var infowindow3 = new google.maps.InfoWindow({ 
    content: 'University of Trinidad and Tobago<br />Scarborough Campuste' 
    }); 
    // End of infowindow code 

    // Adding a click event to the marker 
    google.maps.event.addListener(marker3, 'click', function() { 
    // Calling the open method of the infoWindow 
    infowindow3.open(map, marker3); 
     window.location = "#utttobago"; 
    }); 
    // -------- END OF 3rd MARKER 

    } 
      google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded. 
      google.maps.event.addDomListener(window, "resize", function() { 
var center = map.getCenter(); 
google.maps.event.trigger(map, "resize"); 
map.setCenter(center); 
}) 
</script> 

HTML

<div id="uttsapa"> 

    <div class="container-fullhub"> 
    <div class="container"> 
    <h2 class="hubhead text-center"><img src="images/hubicon.png "> Location 1 
    </h2> 
    <p class="hubadd text-center"> 
    Adress 1 
    </p> 
    </div> 

回答

1

您是否尝试过与jquery.scrollTo插件?它可以完成你所需要的。

+0

我试了一下刚才,但不能让它开始工作。你可以给我一个例子吗? – user1000278

+0

$('body')。scrollTo('#target'); - 在http://lions-mark.com/jquery/scrollTo/ –

+0

有更多的负载感谢很多作品像魅力 – user1000278