我怎样才能让我的谷歌地图无限无缝地向右平移?

Question

我使用Snazzy Maps和google Maps API实现了一个地图。可以在我的网站上找到:http://www.welcomehomemusic.net.

我注意到，当检查地图元素和点击并拖动右地图，它正在更新这个css属性的div。

属性为transform: matrix(1,0,0,1， - 690,0);我想让第5个值平滑地动画化，让它不断增加。

我的第一个想法是使用css动画和关键帧，或者使用Javascript。

感谢任何帮助，谢谢。

Answer 1

来自API文档:

panBy(x:number, y:number)

以给定的像素距离改变地图的中心。如果距离小于地图的宽度和高度，则过渡将平滑地动画化。请注意，地图坐标系统从西到东(对于x值)和从北到南(对于y值)递增。

https://developers.google.com/maps/documentation/javascript/reference?csw=1方法

那就这么简单:

var map = new google.maps.Map(mapElement, mapOptions);
function infiniPan() {
    map.panBy(-0.2, 0);
    setTimeout(infiniPan, 100);
}
infiniPan();

我应该指出它会消耗一些cpu。

Answer 2

我实际上通过使用css动画解决了这个问题。我将地图的宽度设置为6000px，并使用css变换来移动它。我是这么做的。

@keyframes mapSlide { 0% { transform: translateX(-100vw); } 50% { transform: translateX(0px); } 100% { transform: translateX(-100vw); } }

#aristMap {
    height:300px;
    width:6000px;
    z-index:8;
    animation: mapSlide 90s infinite;
    animation-timing-function: ease-in-out; 
}