Question

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

我不需要代码，因为很少有教程如何实现鼠标移动视差。我更感兴趣的是如何将其应用到谷歌地图。

我目前的想法/问题？

是否有可能在不移动Google徽标的情况下在后台移动地图图块？
如果没有，如何让地图更大（在浏览器视口之外）而不会弄乱图块，以便我可以移动整个地图并使用overflow { hidden; }？

不要担心隐藏Google的凭据或搞乱控件，我可以通过divs自行添加所有JS，控件和徽标。

如果您使用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

谷歌地图上的鼠标移动视差？

1 个答案: