Googleマップでポリラインを使用したトラッキングの問題を解決する

Question

Googleマップを使用してライブのトラッキングを開始しようとしていますが、データベースから新しい場所をajax経由で取得しようとしていますが、問題はポリラインを描画することです。 "InvalidValueError：index 0：LatLngまたはLatLngLiteralではありません：オブジェクトではありません "つまり、" line "変数値はここではgoogle maps linkのようにポイントとして使用できません。 VAR行= {LAT：LAT、LNG：LON}ここでコード

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によって示唆されるようにUPDATEです。私は、私は最後の場所だけではない配列を取得コンソールに

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

にそれを変更し、私はこのエラー「ではない緯度経度やLatLngLiteral：：：インデックス0：プロパティLATにない数InvalidValueError」を得た 場所

Answer 1

エラーはこのことを言っている：

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

がないですまたは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>