在谷歌地圖上添加新的緯度經度，如實時跟蹤

Question

我試圖顯示谷歌地圖上的訂單實時跟蹤。 在第一次API命中時，我獲取了所有跟蹤數據併成功繪製在Google地圖上。

現在我想定期調用API（10秒）並獲取新的數據，並在google地圖中添加新收到的lat-long。

就像每10秒地圖都會更新並顯示最新的位置狀態 - 比如實時跟蹤。

這裏是我的JavaScript代碼：

<script type="text/javascript"> 

    var latlongs = []; 
    var orderID = "ASDF1234"; 


    $(document).ready(function() { 
     $.ajax({ 
      url: 'http://api.xyz.com/api/Order/PostOrderDetails', 
      dataType: "json", 
      method: 'post', 
      data: JSON.stringify({ order_id: orderID }), 
      contentType: "application/json; charset=utf-8", 
      success: function (data) { 

       $(data.data.latLong).each(function (index, orderData) {      
        var mylatlongs = new google.maps.LatLng(orderData.latitude, orderData.longitude); 
        latlongs.push(mylatlongs); 
       }); 

       newlatlongsLength = latlongs.length; 
       oldlatlongsLength = latlongs.length; 


       var mapProp = { 
        zoom: 20, 
        center: latlongs[latlongs.length - 1], 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById('google-map-div'), mapProp); 

       var trackPath = new google.maps.Polyline({ 
        path: latlongs, 
        icons: [{ 
         icon: { 
          path: google.maps.SymbolPath.FORWARD_OPEN_ARROW 
         }, 
         repeat: '175px' 
        }], 
        geodesic: true, 
        strokeColor: '#FF0000', 
        strokeOpacity: 1.0, 
        strokeWeight: 2 
       }); 
       trackPath.setMap(map); 
      }, 
      error: function (err) { 
       alert(err); 
      } 
     });   
    }); 
</script> 

這是我的HTML代碼：

<div class="row"> 
    <div class="col-md-12"> 
     <div id="google-map-div" style="height: 480px;"> 
     </div> 
    </div> 
</div> 

那麼，怎樣才能我呼籲每10秒更新情節API LAT-在谷歌地圖上長？

Answer 1

您可以使用SetInterval對於此場景

您的操作的第一個創建函數。那麼你可以在setInterval的調用這個函數..

 setInterval(function() { 
     $.ajax({ 
     url: 'http://api.xyz.com/api/Order/PostOrderDetails', 
     dataType: "json", 
     method: 'post', 
     data: JSON.stringify({ order_id: orderID }), 
     contentType: "application/json; charset=utf-8", 
     success: function (data) { 

      $(data.data.latLong).each(function (index, orderData) {      
       var mylatlongs = new google.maps.LatLng(orderData.latitude, orderData.longitude); 
       latlongs.push(mylatlongs); 
      }); 

      newlatlongsLength = latlongs.length; 
      oldlatlongsLength = latlongs.length; 


      var mapProp = { 
       zoom: 20, 
       center: latlongs[latlongs.length - 1], 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById('google-map-div'), mapProp); 

      var trackPath = new google.maps.Polyline({ 
       path: latlongs, 
       icons: [{ 
        icon: { 
         path: google.maps.SymbolPath.FORWARD_OPEN_ARROW 
        }, 
        repeat: '175px' 
       }], 
       geodesic: true, 
       strokeColor: '#FF0000', 
       strokeOpacity: 1.0, 
       strokeWeight: 2 
      }); 
      trackPath.setMap(map); 
     }, 
     error: function (err) { 
      alert(err); 
     } 
    }); },10000); 

Answer 2

假設你的API會給你每次通話的完整路徑，它不會發生變異之前的點，你可以抓住的失分，並把它們添加到通過trackPath.getPath().push的路徑。喜歡的東西

var mapProp = { 
    zoom: 20, 
    center: latlongs[latlongs.length - 1], 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(
    document.getElementById('google-map-div'), 
    mapProp 
); 

var trackPath = new google.maps.Polyline({ 
    icons: [{ 
     icon: { 
      path: google.maps.SymbolPath.FORWARD_OPEN_ARROW 
     }, 
     repeat: '175px' 
    }], 
    geodesic: true, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
}); 
trackPath.setMap(map); 

function update() { 
    $.ajax({ 
     url: 'http://api.xyz.com/api/Order/PostOrderDetails', 
     dataType: "json", 
     method: 'post', 
     data: JSON.stringify({ order_id: orderID }), 
     contentType: "application/json; charset=utf-8" 
    }).then(function(data) { 
     var path = trackPath.getPath(), 
      coords = data.data.latLong; 

     // restrict the coordinates to the new values 
     coords = coords.slice(path.getLength()); 

     // add each point to the path 
     coords.forEach(function (od) { 
      var point = new google.maps.LatLng(od.latitude, od.longitude); 
      path.push(point); 
     }); 

     // sets a timer to update the points in 10 seconds 
     setTimeout(update, 10000); 
    }); 
} 
update(); 

注意，折線沒有任何路徑創建和填充由第一次調用update。

有關添加到路徑中的點的示例，請參閱https://developers.google.com/maps/documentation/javascript/examples/polyline-complex。