解析json中的坐标以显示在地图上？答案

【问题标题】：Parsing coordinates in json to show on a map?解析json中的坐标以显示在地图上？
【发布时间】：2015-11-01 12:13:52
【问题描述】：

我正在尝试使用 google maps api 使用折线显示用户的路径。我从我创建的休息 api 获取 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>

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。请帮忙。

【问题讨论】：

如何包含 API？ initMap 是怎么调用的？请提供一个Minimal, Complete, Tested and Readable example 来证明该问题。它可能不需要调用您的 REST API，但如果它在没有异步行为的情况下工作，那就是问题的线索..
这是使用 API 的脚本
请解决您问题中的所有 cmets（最好将其更改为包含 MVCE）。获取地图而不是折线向我表明在加载地图后正在填充 flightCoordinates 数组，一旦填充了该数组，您需要重新初始化地图。 example fiddle

标签： javascript jquery json google-maps

【解决方案1】：

试试这个方法

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

【讨论】：

感谢您的回答，我已经使用纯 Javascript 来实现它，但现在我知道您的解决方案有什么问题。
如果我的回答有用请评价