google 地图实时跟踪折线问题

Question

我正在尝试通过 google 地图开始实时跟踪，通过 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

代码片段：

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>

google 地图实时跟踪折线问题

google maps live tracking issue with Polylines

google-maps

tracking