如何为我的 Google 地图设置动画以无限无缝地向右平移？答案

【问题标题】：How can I animate my Google Map to pan to the right endlessly and seamlessly?如何为我的 Google 地图设置动画以无限无缝地向右平移？
【发布时间】：2015-07-16 17:37:43
【问题描述】：

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

我在检查地图元素并在地图上单击并向右拖动时注意到它正在更新 div 上的这个 css 属性。

属性为transform：matrix(1, 0, 0, 1, -690, 0); 我想通过让它无休止地增加来平滑地动画第 5 个值。

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

任何帮助表示赞赏，谢谢。

【问题讨论】：

快速浏览了您的网站，其中没有涉及 iframe，因此应该没有什么可以阻止您使用 CSS 为位置设置动画。这篇文章应该可以帮助您：useragentman.com/blog/2011/01/07/…
你将如何无休止地增加第 5 个值？

标签： javascript css google-maps google-maps-api-3 google-api

【解决方案1】：

来自 API 文档：

panBy(x:number, y:number)

将地图的中心更改为给定距离（以像素为单位）。如果距离小于地图的宽度和高度，则过渡将平滑动画。请注意，地图坐标系从西向东（对于 x 值）和从北向南（对于 y 值）递增。

https://developers.google.com/maps/documentation/javascript/reference?csw=1#methods

那么就这么简单：

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

我应该指出它会吃掉一些 cpu。

【讨论】：

【解决方案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; 
}

【讨论】：