谷歌地图跟踪Polylines

Question

我正在尝试通过谷歌地图通过ajax从数据库中获取新位置来开始实时跟踪并且它工作正常但问题是绘制折线我得到此错误“InvalidValueError：在索引0：不是LatLng或LatLngLiteral ：不是对象“这意味着”行“变量值不能用作此处google maps link中的点。这是代码

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = null;
function autoUpdate() {
    $.post('ajax/track.php',{car:'1'}).done(function (data) {
        var parsed = JSON.parse(data);
        var lat = parsed.lat,
            lon = parsed.lon;
        var newPoint = new google.maps.LatLng(lat,lon);
        var line = "{lat: "+lat+", lng: "+lon+"},";

        if (marker) {
            // Marker already created - Move it
            marker.setPosition(newPoint);
             var flightPlanCoordinates = [
            ];
            flightPlanCoordinates.push(line);
            var flightPath = new google.maps.Polyline({
                path: flightPlanCoordinates,
                geodesic: true,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
            flightPath.setMap(map);
        }
        else {
            marker = new google.maps.Marker({
                position: newPoint,
                map: map,
                icon: 'images/1.png',
            });
        }
        map.setCenter(newPoint);
    });
    setTimeout(autoUpdate, 5000);
}
autoUpdate();

@geocodezip建议的更新：     var line = {lat：lat，lng：lon}; 我收到此错误“InvalidValueError：在索引0处：不是LatLng或LatLngLiteral：在属性lat中：不是数字”所以我将其更改为

var line = {lat: parseFloat(lat), lng: parseFloat(lon)};

在控制台中我得到的最后一个位置不是位置数组

Answer 1

错误告诉你这个：

var line = "{lat: "+lat+", lng: "+lon+"},";

不是google.maps.LatLng或google.maps.LatLngLiteral，因为它不是，它是一个字符串。

这将是有效的google.maps.LatLngLiteral：

var line = {lat: lat, lng: lon};

proof of concept fiddle

代码段

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = null;
var initlat = 42;
var initlon = -72;
var increment = 0.001;
var count = 0;
var flightPlanCoordinates = [];

function autoUpdate() {
  /*  $.post('ajax/track.php', {
      car: '1'
    }).done(function(data) { */
  data = JSON.stringify({
    lat: +(initlat + increment * count),
    lon: +(initlon + increment * count)
  });
  // data = "{lat:" + (initlat + increment * count) + ",lon:" + (initlon + increment * count) + "}";
  count++;
  var parsed = JSON.parse(data);
  var lat = parsed.lat,
    lon = parsed.lon;
  var newPoint = new google.maps.LatLng(lat, lon);
  // var line = "{lat: " + lat + ", lng: " + lon + "},";
  var line = {
    lat: lat,
    lng: lon
  };
  flightPlanCoordinates.push(line);
  if (marker) {
    // Marker already created - Move it
    marker.setPosition(newPoint);


    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });
    flightPath.setMap(map);
  } else {
    marker = new google.maps.Marker({
      position: newPoint,
      map: map,
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(3.5, 3.5)
      }
    });
  }
  map.setCenter(newPoint);
  // });
  setTimeout(autoUpdate, 5000);
}
autoUpdate();

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>