Javascript 解析json中要在地图上显示的坐标？

我试图使用谷歌地图api来显示用户使用多段线的路径。我从我创建的RESTAPI中获取json格式的坐标。api工作正常，但地图未显示路径。以下是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>

这似乎不起作用。我认为我没有正确处理json。请帮忙。

试试这个方法

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

函数initMap（）{
var username=“”；
var FlightPlan坐标=[]；
$（文档）.ready（函数（）{
$.ajax({
url:“http://127.0.0.1:8082/letstravel/location/“+用户名，
数据类型：“json”，
成功：功能（数据）{
用于（数据中的var i）{
flightPlanCoordinates.push（{lat:data[i]。纬度，lng:data[i]。经度}）；
} 
}
});  
});
var map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心：{lat:0，lng:-180}，
mapTypeId:google.maps.mapTypeId.TERRAIN
});
var flightPath=new google.maps.Polyline({
路径：FlightPlan坐标，
测地线：正确，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2
});
flightPath.setMap（map）；
}

您是如何包括API的？initMap是如何命名的？请提供一份说明问题的报告。它可能不需要调用REST API，尽管如果它在没有异步行为的情况下工作，这就是问题的线索。这是使用API maps.googleapis.com/maps/API/js？callback=initMap的脚本"> . 我没有在上面包含它的代码，因为我认为这对于这个问题是不必要的。我刚刚在页面上收到一张地图，我希望得到一条折线。请在您的问题中提出任何意见（最好将其更改为包含一条折线）。获取地图而不是多段线向我表明加载地图后正在填充

flightCoordinates

数组，填充该数组后需要重新初始化地图。谢谢你的回答，我已经用纯Javascript实现了它，但是现在我知道你的解决方案有什么问题了。如果我的回答有用，请给它打分

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