如何實時更新Google地圖多段線？

Question

我試圖在這裏完成的事情是從thingspeak獲得gps座標，並在谷歌地圖上顯示它們。我已經能夠在地圖上只繪製一次折線和標記。當我嘗試更新多段線路徑時，它會消失。

這是我的代碼。

<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()檢索google.maps.LatLng對象MVCArray。

從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>