JS Google Maps API v3 坐标之间的动画标记 [英] JS Google Maps API v3 Animate Marker Between Coordinates

问题描述

我正在开发一个简单的 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.

起点和终点在 initialize() 中预定义.动画的定义是将起点和终点分成 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 Google Maps API v3 坐标之间的动画标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！