Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/google-maps/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在Google map api上滚动时标记跟随多段线_Javascript_Google Maps_Google Maps Api 3 - Fatal编程技术网

Javascript 在Google map api上滚动时标记跟随多段线

Javascript 在Google map api上滚动时标记跟随多段线,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我来到这个奇妙的网站,我想知道如何创建它。 以下是网站: 有人知道或者可以告诉我如何沿着多段线将圆移动到地图中的特定位置吗?还有,你怎样才能做到如此平滑的缩放?我已经寻找这个答案好几天了。如有任何建议,我们将不胜感激。请帮忙。谢谢大家! 链接源不是Maps Javascript API的实现(它们仅使用静态地图图像作为背景) 但是,使用Maps API可以沿路径创建动画符号,请参见:它没有使用google Maps API v3,正如您似乎相信的那样,它使用的是来自google的单独静态图像,

我来到这个奇妙的网站,我想知道如何创建它。 以下是网站:


有人知道或者可以告诉我如何沿着多段线将圆移动到地图中的特定位置吗?还有,你怎样才能做到如此平滑的缩放?我已经寻找这个答案好几天了。如有任何建议,我们将不胜感激。请帮忙。谢谢大家!

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


但是,使用Maps API可以沿路径创建动画符号,请参见:

它没有使用google Maps API v3,正如您似乎相信的那样,它使用的是来自google的单独静态图像,称为

查看脚本控制台会发现它们来自以下地址:

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
要制作类似的东西,需要大量的编码。以下是您至少需要执行的步骤,以使您的操作与之类似:

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