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

Question

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

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

我目前的想法/问题？

• 是否可以在不移动 Google Logo 的情况下在后台移动 map 图 block ？
• 如果没有，如何在不弄乱图 block 的情况下使 map 更大(在浏览器视口(viewport)之外)，以便我可以移动整个 map 并使用 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);
});

确保在 map 上方添加一个 div 并禁用 map 上的控件

Updated JSFiddle

获得额外说明后，您可以添加一个监听器来检查 map 是否被拖动。

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

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

Draggable map with mouse scroll