Google 地图上的鼠标移动视差？

Question

是否可以向 Google 地图添加一些东西 like this？这个演示有多层视差，我只需要一个对于地图本身。

我并不一定需要代码，因为关于如何实现鼠标移动视差的教程很少。我更感兴趣的是如何将其应用于 Google 地图。

我目前的想法/问题？

是否可以在不移动 Google 徽标的情况下移动背景中的地图图块？
如果没有，如何在不弄乱图块的情况下使地图更大（超出浏览器视口），以便我可以移动整个地图并使用 overflow { hidden; }？

不用担心隐藏 Google 的凭据或弄乱控件，我可以通过 JS.[=16= 自己添加所有 divs、控件和徽标]

如果您使用 my provided jsFiddle example 来表达您的观点，我将不胜感激。

Answer 1

您可以使用 panTo() 函数执行此操作。我给了它一些滚动效果的默认数字，您可以更改以满足您的需要。

$( "#map-cover" ).on( "mousemove", function( event ) {
  var newLatlng = new google.maps.LatLng(
                    myLatlng.lat() + event.pageY / 1000, 
                    myLatlng.lng() + event.pageX / 1000)
  map.panTo(newLatlng);
});

确保在地图上方添加 div 并禁用地图上的控件

Updated JSFiddle

在获得额外说明后，您可以添加一个侦听器来检查地图是否正在被拖动。

map.addListener("drag", function() {
    dragging = true;
});

map.addListener("dragend", function() {
    dragging = false;
});

Draggable map with mouse scroll

Google 地图上的鼠标移动视差？

Mouse movement parallax on Google Map?

javascript

jquery

google-maps

google-maps-api-3

parallax