Question

我来到这个梦幻般的网站，我很想知道如何创建它。这是网站： http://seidenstrasse.srf.ch/de/home.html

任何人都知道或可以指出如何将该圆圈移动到折线后的地图中的某些位置？另外，你怎么能做这样平滑的缩放？我好几天都在搜索这个答案。任何建议表示赞赏。请帮忙。谢谢！

Answer 1

链接源不是Maps-Javascript-API的实现（它们仅使用静态地图图像作为背景）。

但是，使用Maps-API可以在路径上显示动画符号，请参阅：https://developers.google.com/maps/documentation/javascript/symbols#add_to_polyline

Answer 2

它似乎不相信谷歌地图api v3，它使用谷歌的独立静态图像，称为static image api。

查看脚本控制台显示它们来自以下地址：

http://maps.googleapis.com/maps/api/staticmap?key=AIzaSyC6akZWmox8QKHbzRZ5k-K0j4jQx3lM6D0&center=41.297869337699765,32.67865412499997&zoom=4&size=631x223&scale=2&sensor=false&maptype=satellite&format=jpg

如果它是google maps api v3的普通地图，则网址如下：

https://mts0.googleapis.com/vt?lyrs=m@255183771&src=apiv3&hl=en&x=232&y=154&z=8&style=47,37%7Csmartmaps

要做出类似的东西，你需要大量的编码。以下是您至少需要使其类似的步骤：

使用静态图片API从谷歌获取图片并将其显示为正确位置的地图
采取一些外部库或自己编码那些地方之间的平滑翻译，因为我们处理的图像可以用js和css的组合制作（这些移动的翻译包括缩放效果，它只不过是使图像更接近和可能在两者之间滑动以避免像素。）可能来自Google，您可以找到如何缩放图像的示例等。
对于标记和折线，在画布上绘制它们，例如位于静态地图图像上方。这又需要更多的javascript，因为你需要计算位置并使用requestAnimationFrame来平滑动画。或者，您可以使用像图像这样的dom元素，并再次使用js和css转换的组合移动它们。

Tbh，这一切都需要大量的编码和谷歌地图api v3为您节省了大量的工作，但它看起来不那么好，它限制了您的创造力。标记可以沿着线移动，但它看起来永远不会像你提供的那样好，而且需要更多的CPU。我试过了。我建议你使用google maps api v3，如果你对javascript编程没有那么有经验并且实现标记移动。

Example animation with google maps api v3

在Google地图api上滚动时，标记会遵循折线

2 个答案: