解析json中的座標以在地圖上顯示？

-1

我正在嘗試使用谷歌地圖API來顯示用戶使用折線的路徑。我從我創建的休息API獲取json格式的座標。 api工作正常，但地圖沒有顯示路徑。這裏是JSON格式解析json中的座標以在地圖上顯示？

[{"user":"qwerty","latitude":28.648036,"longitude":77.2326533},{"user":"qwerty","latitude":28.646096,"longitude":77.183385},{"user":"qwerty","latitude":28.640015,"longitude":77.168119},{"user":"qwerty","latitude":28.644299,"longitude":77.162207}]

，這裏是JavaScript代碼，我使用的地圖

<script async defer 
     src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 

<script> 

    var username = "<%= session.getAttribute("Member").toString() %>"; 

    var flightPlanCoordinates = []; 
     $(document).ready(function(){ 
      $.ajax({ 
       url: "http://127.0.0.1:8082/letstravel/location/"+username, 
       dataType: "json", 
       success: function(data) { 
        for(var i in data){ 
         flightPlanCoordinates.push({ lat: data[i].latitude, lng: data[i].longitude }); 
        } 
         } 
      }); 
     }); 

    function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: {lat: 0, lng: -180}, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
     }); 


     var flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
     }); 

     flightPath.setMap(map); 
    } 
</script>

flightPlanCoordinates應該在這個格式：

flightPlanCoordinates = [ 
    {lat: 37.772, lng: -122.214}, 
    {lat: 21.291, lng: -157.821}, 
    {lat: -18.142, lng: 178.431}, 
    {lat: -27.467, lng: 153.027} 
    ];

這似乎並沒有工作。我想我沒有正確處理json。請幫忙。

來源

2015-11-01 doctorsherlock

你是如何包括API？ initMap如何被調用？請提供證明此問題的[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/mcve）。它可能不需要調用你的REST API，但是如果它沒有異步行爲就可以工作，那是對這個問題的一個線索。 – geocodezip

這是使用API的腳本。我沒有在上面列出它的代碼，因爲我認爲這對問題沒有必要。我只是在頁面上收到一張地圖，我希望得到一條折線。 – doctorsherlock

請解決您的問題中的任何意見（最好將其更改爲包含[MVCE]（http://stackoverflow.com/help/mcve））。獲取地圖而不是多段線表明，在地圖加載後，正在填充'flightCoordinates'數組，您需要在該數組填充後重新初始化地圖。 [示例小提琴]（http://jsfiddle.net/geocodezip/acpf8x3t/1/） – geocodezip

嘗試這種方式

<script> 


    function initMap() { 

    var username = "<%= session.getAttribute("Member").toString() %>"; 

    var flightPlanCoordinates = []; 
     $(document).ready(function(){ 
      $.ajax({ 
       url: "http://127.0.0.1:8082/letstravel/location/"+username, 
       dataType: "json", 
       success: function(data) { 
        for(var i in data){ 
         flightPlanCoordinates.push({ lat: data[i].latitude, lng: data[i].longitude }); 
        } 
         } 
      }); 
     }); 


     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: {lat: 0, lng: -180}, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
     }); 


     var flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
     }); 

     flightPath.setMap(map); 
    } 
</script>

來源

2015-11-01 19:14:24 scaisEdge

感謝您的回答，我已經使用簡單的Javascript來實現它，但現在我知道你的解決方案有什麼問題。 – doctorsherlock

如果我的回答很有用，請評分 – scaisEdge

解析json中的座標以在地圖上顯示？

回答

相關問題