谷歌地图视差效果答案

【问题标题】：Google Map Parallax Effect谷歌地图视差效果
【发布时间】：2013-08-15 20:51:01
【问题描述】：

我想知道如何在这个 wordpress 主题上创建视差 Google 地图效果（向底部滚动）

http://themeforest.net/item/3clicks-responsive-multipurpose-wordpress-theme/full_screen_preview/5092225

我尝试使用一些不同的视差 jquery 脚本和 javascript，但似乎无法获得相同的效果。

【问题讨论】：

我不确定我看到地图的视差 - 对我来说这似乎是一个简单的谷歌地图？
小心，Google 不允许在没有看到 Google 标志的情况下使用地图。

标签： javascript jquery wordpress google-maps

【解决方案1】：

只有一张地图的效果并不难实现。观察窗口的scroll-事件，使用贴图的panBy-方法得到效果。

简单实现：http://jsfiddle.net/doktormolle/dXqhn/

【讨论】：

鼠标滚轮无法正常工作。有什么解决办法吗？

【解决方案2】：

您提供的链接对我来说似乎不是一个视差，但无论哪种方式，我都使用 Jquery scrollTop() 方法做了一个简短的小提琴，展示了它是如何实现的，注意它有点错误，但也许我们可以找到基于它的更好的解决方法。

这是从 Dr.Molle 的回答中分叉出来的小提琴：http://jsfiddle.net/xsz32sy9/

这里是 Jquery 代码：

var map;
function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(52.5498783, 13.425209099999961),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
  new google.maps.Marker({map:map,position:map.getCenter()});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(window).scroll(function(){
    //THE HEIGHT, PLUS THE MARGIN OR PADDING IT NEEDS TO BE FULLY COVERED
    if($(window).scrollTop() < $('#map_canvas').height() + 21) 
        $('#map_canvas').css({'transform':'translate(0px,'+$(window).scrollTop()+'px)'});
});

【讨论】：

【解决方案3】：

页面看起来像谷歌地图，确保地图层大于它显示的空间，然后在用户滚动时将上边距从 0px 修改为 -150px。

缩放控件位于单独的固定位置 div 中，以便它们在背景移动时保持原位。

【讨论】：