Googleマップのポリラインをリアルタイムで更新するにはどうすればよいですか？

Question

私がここでやってみることは、thingspeakからgpsの座標を取得してGoogleマップに表示することです。私はポリラインとマーカーをマップ上に一度だけ描くことができました。ポリラインのパスを更新しようとすると消えます。

ここは私のコードです。

<script type="text/javascript"> 
    var map; 
    var geocoder; 
    var flightPath; 
    var marker; 

    function locate() { 
     initMap(); 
     firstDraw(); 
    } 

    //Initaite map 
    function initMap() { 
     var mapProp = { 
      zoom: 12, 
     }; 
     map = new google.maps.Map(document.getElementById("map-canvas"), mapProp); 
     geocoder = new google.maps.Geocoder; 
    } 

    //draw for the first time 
    function firstDraw() { 
     $.getJSON("https://api.thingspeak.com/channels/284335/fields/1.json?api_key=D76FD3BOO9GNZBEY&results=10&location=true", function (result) { 
      var i; 
      var cordinates = []; 
      var lastTime=result.feeds[result.feeds.length-1]; 
      for (i = 0; i < result.feeds.length; i++) { 
       cordinates[i] = { lat: Number(result.feeds[i].latitude), lng: Number(result.feeds[i].longitude) }; 

      } 

      flightPath = new google.maps.Polyline({ 
       path: cordinates, 
       strokeColor: "#0000FF", 
       strokeOpacity: 0.8, 
       strokeWeight: 2 
      }); 
      flightPath.setMap(map); 
      map.setCenter(cordinates[cordinates.length - 1]); 
      var marker = new google.maps.Marker({ 
       position: cordinates[cordinates.length - 1], 
       map: map, 
       title: "Last Seen", 
      }); 
     }); 
    } 

    function updateMap() 
    { 
     $.getJSON("https://api.thingspeak.com/channels/284335/fields/1.json?api_key=D76FD3BOO9GNZBEY&results=1&location=true", function (result) { 
      var path = flightPath.getPath(); 
      var newCord = { lat: Number(result.feeds[0].latitude), lng: Number(result.feeds[0].longitude) }; 
      path.push(newCord); 
      flightPath.setPath(path); 
     }); 

    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfi_CDQTUC9waYxMwyJuED8DwoDJyl3F0&callback=myMap"></script> 

私はここで間違っていますか？前もって感謝します。

Answer 1

問題は、newCordはgoogle.maps.LatLngオブジェクトではありません。

var newCord = { lat: Number(result.feeds[0].latitude), lng: Number(result.feeds[0].longitude) }; 
path.push(newCord); 

getPath()はMVCArraygoogle.maps.LatLngのオブジェクトを検索します。 the documentationから

：

getPath()
Return Value: MVCArray
Retrieves the path.

google.maps.LatLngオブジェクトを取る多くの操作がgoogle.maps.LatLngLiteralオブジェクトを取るために強化されてきたが、それはここでは動作しません。代わりにgoogle.maps.LatLngオブジェクトを使用してください：

var path = flightPath.getPath(); 
var newCord = new google.maps.LatLng(Number(result.feeds[0].latitude), Number(result.feeds[0].longitude)); 

path.push(newCord); 
flightPath.setPath(path); 

proof of concept fiddle

コードスニペット：あなたはどのようなエラーが出るん

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="map-canvas"></div> 
 
<script type="text/javascript"> 
 
    var map; 
 
    var geocoder; 
 
    var flightPath; 
 
    var marker; 
 

 
    function locate() { 
 
    initMap(); 
 
    firstDraw(); 
 
    setInterval(updateMap, 5000); 
 
    } 
 

 
    //Initiate map 
 
    function initMap() { 
 
    var mapProp = { 
 
     zoom: 12, 
 
     center: { 
 
     lat: 0, 
 
     lng: 0 
 
     } 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapProp); 
 
    geocoder = new google.maps.Geocoder; 
 
    } 
 

 
    //draw for the first time 
 
    function firstDraw() { 
 
    $.getJSON("https://api.thingspeak.com/channels/284335/fields/1.json?api_key=D76FD3BOO9GNZBEY&results=10&location=true", function(result) { 
 
     var i; 
 
     var cordinates = []; 
 
     var lastTime = result.feeds[result.feeds.length - 1]; 
 
     for (i = 0; i < result.feeds.length; i++) { 
 
     cordinates[i] = { 
 
      lat: Number(result.feeds[i].latitude), 
 
      lng: Number(result.feeds[i].longitude) 
 
     }; 
 
     } 
 
     flightPath = new google.maps.Polyline({ 
 
     path: cordinates, 
 
     strokeColor: "#0000FF", 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 2 
 
     }); 
 
     flightPath.setMap(map); 
 
     map.setCenter(cordinates[cordinates.length - 1]); 
 
     var marker = new google.maps.Marker({ 
 
     position: cordinates[cordinates.length - 1], 
 
     map: map, 
 
     title: "Last Seen", 
 
     }); 
 
    }); 
 
    } 
 

 
    function updateMap() { 
 
    $.getJSON("https://api.thingspeak.com/channels/284335/fields/1.json?api_key=D76FD3BOO9GNZBEY&results=1&location=true", function(result) { 
 
     var path = flightPath.getPath(); 
 
     var newCord = new google.maps.LatLng(Number(result.feeds[0].latitude), Number(result.feeds[0].longitude)); 
 
     path.push(newCord); 
 
     flightPath.setPath(path); 
 
    }); 
 
    } 
 
</script> 
 
<script src="https://maps.googleapis.com/maps/api/js?callback=locate"></script>