在谷歌地图api上滚动时，标记跟随折线

marker follow polyline when scroll on Google map api

本文关键字：跟随 折线 谷歌地图 api 滚动      更新时间：2023-09-26

我来到这个奇妙的网站，我很想知道如何创建它。网站如下:http://seidenstrasse.srf.ch/de/home.html

有谁知道或者可以告诉我如何在折线之后将圆圈移动到地图上的某些位置?另外，你如何做到如此平滑的缩放?我已经寻找这个答案好几天了。任何建议都很感谢。请帮助。谢谢你！

它并没有像你想象的那样使用google maps api v3，它使用的是来自google的独立的静态图像，称为静态图像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的普通地图，url如下:

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

要做出类似的东西，你需要大量的编码。下面是你至少需要的步骤，使你的代码类似:

  1. 使用静态图像api从google获取图像并在正确位置显示为地图
  2. 采取一些外部库或代码自己那些平滑的地方之间的翻译，因为我们正在处理的图像，这些可以用js和css的组合(这些移动翻译包括缩放效果，它只不过是使图像更接近，也许滑动之间避免像素。)可能从谷歌你找到的例子如何缩放图像等。
  3. 对于标记和折线，将它们绘制在画布上，例如位于静态地图图像上方。这需要更多的javascript，因为你需要计算位置，并使用requestAnimationFrame来实现流畅的动画。或者，你可以使用像图像这样的dom元素，并再次结合js和css转换来移动它们。
这一切都需要大量的编码和谷歌地图api v3节省了你大量的工作，但它看起来不那么好，它限制了你的创造力。可以让标记沿着线移动，但它永远不会像你提供的例子那样好看，而且它需要更多的CPU。我已经试过了。我建议你使用谷歌地图api v3，如果你不是那么有经验的javascript编程和实现标记移动。

google maps api v3动画示例

链接的源代码不是Maps-Javascript-API的实现(它们只使用static-map-images作为背景)。

但是，可以使用Maps-API沿着路径生成动画符号，参见:https://developers.google.com/maps/documentation/javascript/symbols#add_to_polyline

相关文章：