谷歌地图实时跟踪问题与折线 [英] google maps live tracking issue with Polylines

问题描述

我试图通过谷歌地图开始实时跟踪通过ajax从数据库获取新位置，它工作正常，但问题是绘制多段线我得到这个错误InvalidValueError：在索引0：不是LatLng或LatLngLiteral ：不是一个对象，这意味着行变量值不能用作这里的一个点

解决方案

错误告诉你这：

  var line ={lat：+ lat +，lng：+ lon +}，; 
  

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

这会是一个有效的 google.maps.LatLngLiteral ：

  var line = {lat ：lat，lng：lon}; 
  

概念证明小提琴

程式码片段：

< pre class =snippet-code-js lang-js prettyprint-override> var map = new google.maps.Map（document.getElementById（'map'），{zoom：15，mapTypeId：google var initLevel = 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 =解析.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（线）;如果（标记）{/ /标记已经创建 - 移动它marker.setPosition（newPoint）; var flightPath = new google.maps.Polyline（{path：flightPlanCoordinates，geodesic：true，strokeColor：'＃FF0000'，strokeOpacity：1.0，strokeWeight：2}）; flightPath.setMap（地图）; } 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％;宽度：100％; margin：0px; < script src =https：//

I'm trying to start a live tracking via google maps fetching new locations from a database via ajax and it works fine but the problem is with drawing Polylines I get this error "InvalidValueError: at index 0: not a LatLng or LatLngLiteral: not an Object" which means the "line" variable value can't be used as a point as in here google maps link. Here's the code

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();

UPDATE as suggested by @geocodezip: var line = {lat: lat, lng: lon}; I got this error "InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number" so I changed it into

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

in console I get the last location only not an array of locations

解决方案

The error is telling you that this:

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

Is not a google.maps.LatLng or a google.maps.LatLngLiteral, because it isn't, it is a string.

This would be a valid google.maps.LatLngLiteral:

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

proof of concept fiddle

code snippet:

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>

这篇关于谷歌地图实时跟踪问题与折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！