如何使用Javascript访问并对现有的leaflet地图折线进行动画处理？

Question

有人能建议我如何使用JavaScript访问并动画化此处的红色折线吗：http://gymloop.lukem.co.uk（登录：User2 / pass2，然后选择“Challenges”）。

我想将折线从第一个标记动画到红线的末端（类似印第安纳琼斯，但不包括地图移动且不使用Google Maps）。 它需要是动态的，因为不同的用户将行驶不同的距离。

我需要的解决方案适用于FF，IE7 +和Chrome。

我正在使用Cloudmade的leaflet地图，并希望避免使用Google Maps。

在gis.stackexchange中有更多相关信息。

- codecowboy

---

为什么不在产品的开发者论坛上提问呢？这似乎非常针对该产品，而不是一般的JS。我可能错了。http://support.cloudmade.com/developers-forums - CrazyDart

Leaflet产品本身没有原生动画功能，因此我需要使用其他工具来实现动画效果。我在考虑可能需要复制折线并在现有地图上叠加一些透明的画布来实现。 - codecowboy

您提到需要支持IE7+，但是在IE9之前不支持SVG，因此叶片地图无法呈现路径。如果您想要一个能够绘制线条的脚本，那么您应该更新您的问题以反映这一点。 - Mihai Alexandru Bîrsan

在这个阶段使用类似svgweb的工具来支持旧版浏览器是可以接受的 http://code.google.com/p/svgweb/。不过我需要进行测试。 - codecowboy

此外，leaflet API似乎表明旧版IE将会回退到VML。http://leaflet.cloudmade.com/reference.html#polyline - codecowboy

Answer 1

我已经检查了您的代码，似乎您正在使用leaflet API绘制线条。因此，我决定编写一个有点通用的函数来为这些类型的线条提供动画效果。（顺便说一下，我很困惑为什么该API使用路径标签而不是线标签，但我已经接受了这种方式。）

以下是代码：http://jsfiddle.net/mihaibirsan/Wzvre/

我希望对它进行一些修改，但是我想先尝试争取奖励的机会。 :D （我会回来进行修改并在几个小时内发布更新，一旦我完成其他工作。）

- Mihai Alexandru Bîrsan

---

谢谢Mihai :) - 这看起来非常有前途。 - codecowboy

功能页面显示支持IE7-9，但实际上路径功能在IE7和IE8上无法使用。以下是一组屏幕截图：在Chrome上，在IE9上，通过IE9 Dev在IE8上，通过IE9 Dev在IE7上。 - Mihai Alexandru Bîrsan

我认为这可能会误导用户，因为页面已经损坏，用户的总距离非常大。我现在已经重置了它。 - codecowboy

事实证明，我忘记实现一个包含VML元素规则的IE CSS文件。你认为你的代码能用于VML路径吗？ - codecowboy

当可用时，可以将其适应于VML元素。请在有源代码时显示VML源代码。 - Mihai Alexandru Bîrsan

Answer 2

我非常推荐 jquery_svg插件。我一直在使用它，它有很多功能，包括动画、路径上的文本和用户交互。

- rubik

---

谢谢。然而，似乎使用所有这些库（例如Raphael和jQuery SVG），您无法访问或动画化未使用该库创建的任何内容。此外，我需要想出适用于跨浏览器的解决方案。 - codecowboy