谷歌地图与折线的实时跟踪问题

Question

我正在尝试通过谷歌地图开始实时跟踪，通过 ajax 从数据库中获取新位置，它工作正常，但问题是绘制折线我收到此错误“InvalidValueError: at index 0: not a LatLng or LatLngLiteral : not an Object”，这意味着“line”变量值不能用作此处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: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number”所以我将其更改为

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

代码 sn-p：

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>