Question

尝试为一条线设置动画，我已经找出了大部分代码。我收到错误而不确定原因？

这是登录到控制台的错误。你可以看到它出错的地方。

CONSOLE LOG：

     c is (30.37470457, -97.76039932000003)
     get at depature is (30.37470457, -97.76039932000003)
     get at arrival is (30.39386213, -97.75522519000003)
     path is path.getPath() [object Object]
     steps is running
     are we there yet is(30.374781200646034, -97.76037862752048)
     steps is running
    js?key=secret&sensor=false&libraries=geometry:38 Uncaught TypeError: Cannot read property 'lat' of undefined_.Ob @ js?key=secret&sensor=false&libraries=geometry:38Gy.interpolate @ js?key=secret&sensor=false&libraries=geometry:125(anonymous function) @ 
     steps is running
    js?key=secret&sensor=false&libraries=geometry:38 Uncaught TypeError: Cannot read property 'lat' of undefined_.Ob @ js?key=secret&sensor=false&libraries=geometry:38Gy.interpolate @ js?key=secret&sensor=false&libraries=geometry:125(anonymous function) @ 
     steps is running
    js?key=secret&sensor=false&libraries=geometry:38 Uncaught TypeError: Cannot read property 'lat' of undefined_.Ob @ js?key=secret&sensor=false&libraries=geometry:38Gy.interpolate @ js?key=secret&sensor=false&libraries=geometry:125(anonymous function) @ 
     steps is running

JS CODE：

    function drawPath2(run_id){
  var request = $.ajax({
    url: "/requester/potrip?r_id=" + r_id,
    type: "GET",
    dataType: "json"
  });

  request.done(function(data) {
    console.log("starting request done");
    var p = data['points'];
    var c = [];
    var bounds = new goog.LatLngBounds();
    for(var i = 0; i < p.length; i++){
      var l = new goog.LatLng(parseFloat(p[i][1]), parseFloat(p[i][0]));
      bounds.extend(l);

      c.push(l);
    }

    console.log("c is " + c);
    console.log("c is " + c[0]);
    departure = parseFloat(c[0][1]);
      arrival = parseFloat(c[c.length-1][0]);
    var path = createPoly(c, "head");
    map.fitBounds(bounds);
    path.setMap(null);

console.log("get at depature is " + path.getPath().getAt(0));
console.log("get at arrival is " + path.getPath().getAt(path.getPath().getLength()-1));
console.log("path is path.getPath() " + path.getPath());
    var step = 0;
 var numSteps = 250; //Change this to set animation resolution
 var timePerStep = 5; //Change this to alter animation speed
 var theLenght = path.getPath().getLength()-1;
 var interval = setInterval(function() {
     step += 1;
     console.log("steps is running");
     if (step > numSteps) {
      console.log("clearinginterval" + step);
         clearInterval(interval);
     } else {

         var are_we_there_yet = google.maps.geometry.spherical.interpolate(path.getPath().getAt(0),path.getPath().getAt(1),step/numSteps);
         console.log("are we there yet is" + are_we_there_yet);
         path.setPath([path.getPath().getAt(0), are_we_there_yet]); <-- ERROR
     }
 }, timePerStep);



  });

  request.fail(function(jqXHR, textStatus) {
    console.log( "Request failed: " + textStatus );
  });
}

更新：

使用@geocodezip答案和代码后，我有几个语法问题。我现在正在使用他的代码，但仍然没有工作。我相信这是我的数据点问题。我的观点是3秒GPS抓取的情节，而不仅仅是乞讨和终点。我已经更新了@geocodezip JSFiddle，您可以看到在使用我的数据点时它会绘制一个点。如果你删除了我的所有数据点，但是它删除了两条数据点，而不是我所拥有的数据点。

https://jsfiddle.net/rpse4u7q/7/

DATA：

      var data = {
  "points": [
        [-97.76039932, 30.37470457],
        [-97.76039773, 30.37470464],
        [-97.76025161, 30.37481161],
        [-97.76048998, 30.3752743],
        [-97.76086747, 30.37543242],
        [-97.76218839, 30.3757006],
        [-97.76345371, 30.37628355],
        [-97.76440906, 30.37738785],
        [-97.76498148, 30.37882327],
        [-97.76550885, 30.38187354],
        [-97.76606298, 30.38390495],
        [-97.76639823, 30.38462131],
        [-97.76633701, 30.38513405],
        [-97.7652047, 30.38599167],
        [-97.76364974, 30.38714456],
        [-97.76177313, 30.38802739],
        [-97.76056218, 30.38809251],
        [-97.76013834, 30.38807344],
        [-97.75972944, 30.38843747],
        [-97.75970029, 30.38948685],
        [-97.75958011, 30.39068898],
        [-97.75859334, 30.39140352],
        [-97.75722475, 30.39161915],
        [-97.75636673, 30.3926098],
        [-97.75564576, 30.39375132],
        [-97.75525439, 30.39416341],
        [-97.75484361, 30.39382476],
        [-97.75508556, 30.39377933],
        [-97.75523972, 30.39385163],
        [-97.75522519, 30.39386213]
    ]
}

var olddata = {
  points: [
    [-72, 42],
    [-73, 43]
  ]
};

Answer 1

你有一个逻辑问题。您不能使用折线的路径来包含路径的最终值和插值。一旦它停留在零长度折线处，就运行动画。

此代码适用于我：

var are_we_there_yet = google.maps.geometry.spherical.interpolate(
                         c[0], 
                         c[1], 
                         step / numSteps);
path.setPath([c[0], are_we_there_yet]);

代码段

var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  animatePolyline(data);
}
google.maps.event.addDomListener(window, "load", initialize);


function animatePolyline(data) {
  // input data
  var p = data.points;
  // array of google.maps.LatLng objects
  var c = [];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < p.length; i++) {
    var l = new google.maps.LatLng(parseFloat(p[i][1]), parseFloat(p[i][0]));
    bounds.extend(l);

    c.push(l);
  }

  var path = new google.maps.Polyline({
    path: [],
    map: map
  });
  map.fitBounds(bounds);
  path.setMap(map);

  var step = 0;
  var numSteps = 250; //Change this to set animation resolution
  var timePerStep = 5; //Change this to alter animation speed
  var theLength = path.getPath().getLength() - 1;
  var interval = setInterval(function() {
    step += 1;
    if (step > numSteps) {
      clearInterval(interval);
    } else {
      var are_we_there_yet = google.maps.geometry.spherical.interpolate(c[0], c[1], step / numSteps);
      path.setPath([c[0], are_we_there_yet]);
    }
  }, timePerStep);
}


var data = {
  points: [
    [-72, 42],
    [-73, 43]
  ]
};

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

<div id="map_canvas"></div>

Google Map API抛出JS错误

1 个答案: