JS谷歌地图API第3版动画标记坐标之间 [英] JS Google Maps API v3 Animate Marker Between Coordinates

问题描述

我有我的工作，需要我的动画不同COORDS之间的多个标志的运动一个简单的JavaScript地图应用程序。每个标记是自由地在其自身的移动，所有标记都存储在数组列表。不过，我一直有麻烦让他们平稳过渡的位置。

I have a simple javascript maps application that I'm working on that requires me to animate the movement of multiple markers between different coords. Each marker is free to move on its own and all markers are stored in an array list. However, I have been having trouble getting them to smoothly transition locations.

我做过大量研究和试验/错误，但没有运气，任何人有任何运气吗？

I've done a ton of research and trial/error but no luck, anyone have any luck with this?

推荐答案

我的快速和肮脏的方法不涉及大量的研究：（

My quick-and-dirty approach does not involve a ton of research :(

下面的演示： http://jsfiddle.net/yV6xv/4/ 点击一个标记，开始移动它，它停止后，您可以再次点击回到初始点。在运动的同时点击给出奇怪的结果。

Here's the demo: http://jsfiddle.net/yV6xv/4/ Click on a marker to begin moving it, after it stops, you can click again to go back to its initial point. Clicking while in motion gives strange results.

起点和终点都在 pdefined $ P $初始化（）。动画是通过将起点和终点为100段，并与一组间隔放置的标记在这些点限定。所以，动画时间是固定的：标记长距离传输快比更短的距离

Start and endpoints are predefined in initialize(). The animation is defined by dividing the start and endpoints into 100 segments, and placing the marker at these points with a set interval. So the animation time is fixed: markers travel longer distances "faster" than shorter distances.

我没有做太多的测试，我知道点击一个移动的标记将出现意想不到的结果（起点和终点得到错位）

I didn't do much testing, I know clicking on a moving marker will give unexpected results (start and endpoints get misplaced)

这是演示的有趣的部分：

This is the "interesting" part of the demo:

      // store a LatLng for each step of the animation
      frames = [];
      for (var percent = 0; percent < 1; percent += 0.01) {
        curLat = fromLat + percent * (toLat - fromLat);
        curLng = fromLng + percent * (toLng - fromLng);
        frames.push(new google.maps.LatLng(curLat, curLng));
      }

      move = function(marker, latlngs, index, wait, newDestination) {
        marker.setPosition(latlngs[index]);
        if(index != latlngs.length-1) {
          // call the next "frame" of the animation
          setTimeout(function() { 
            move(marker, latlngs, index+1, wait, newDestination); 
          }, wait);
        }
        else {
          // assign new route
          marker.position = marker.destination;
          marker.destination = newDestination;
        }
      }

      // begin animation, send back to origin after completion
      move(marker, frames, 0, 20, marker.position);

这篇关于JS谷歌地图API第3版动画标记坐标之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！