如何实时更新 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() 检索 MVCArray 个 google.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>

如何实时更新 Google 地图折线？

How do i update Google Maps polyline in real time?

javascript

google-maps

real-time

google-polyline