Google 地图可以设置为缓慢持续平移吗？就像一场全球革命？

发布于 2024-11-26 20:08:22 字数 105 浏览 1 评论 0原文

正如标题所说。我正在寻找解决方案，但没有找到任何可以引导我找到正确文档或文章的内容。

如果您有任何想法或可以向我指出一个可以使用的可能解决方案，我将不胜感激。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅浅淡淡 2024-12-03 20:08:22

您可以自己这样做：

使用 setInterval 来设置建立一个定期运行的函数。
该函数将调用 panBy 在 Google 地图对象上“旋转”一下。

这应该会给你一个简单的动画来完成你想要的事情。当然，您需要调整给 setInterval 的时间间隔以获得感觉流畅的效果。您应该有这样的内容：

// Create your map and leave it in the "map" variable.
setInterval(function() {
    map.panBy(x, 0);
}, n);

选择适当的 x 和 n 值取决于您。

You can do this yourself like this:

Use setInterval to set up a function to be run periodically.
The function would call panBy on the Google map object to "rotate" it a bit.

That should give you a simple animation that does what you want. You'd want to adjust the time interval that you give to setInterval to get something that feels smooth of course. You should have something like this:

// Create your map and leave it in the "map" variable.
setInterval(function() {
    map.panBy(x, 0);
}, n);

Choosing appropriate x and n values is up to you.

回复收藏 0 原文

萌无敌 2024-12-03 20:08:22

接受的答案是好的，但有点过时了。您应该使用 window.requestAnimationFrame 而不是 window.setInterval。这将为您提供更流畅的动画。

可以在此处找到一个简单的示例（不是我提供的），但其要点看起来像这样的东西：

var map = new google.maps.Map(document.getElementById('my-map'), mapOptions)
function animate () {
  map.panBy(2.5 / 2, 1.3 / 2)
  window.requestAnimationFrame(function () {
    animate()
  })
}
// eslint-disable-next-line
google.maps.event.addListenerOnce(map, "tilesLoaded", function () {
  window.requestAnimationFrame(function () {
    animate()
  })
})
window.requestAnimationFrame(function () {
  animate()
})

The accepted answer is ok, but a little outdated. Instead of window.setInterval you shoud use window.requestAnimationFrame. This will give you a smoother animation.

A simple example (not from me) can be found here, but the gist of it looks something like this:

var map = new google.maps.Map(document.getElementById('my-map'), mapOptions)
function animate () {
  map.panBy(2.5 / 2, 1.3 / 2)
  window.requestAnimationFrame(function () {
    animate()
  })
}
// eslint-disable-next-line
google.maps.event.addListenerOnce(map, "tilesLoaded", function () {
  window.requestAnimationFrame(function () {
    animate()
  })
})
window.requestAnimationFrame(function () {
  animate()
})

回复收藏 0 原文

~没有更多了~