为 Google Maps API 从 JSON 转换经度和纬度数据

Question

我一直在尝试基于 JSON 的一些数据，通过 Google Maps API 在嵌入式地图上动态生成折线。

Google 给出的将一组静态坐标传递给其 API 的示例是：

    var flightPlanCoordinates_static = [
      {lat: 51.470544, lng: -2.588658},
      {lat: 51.867286, lng: -2.238049},
      {lat: 52.531292, lng: -1.899454}
    ];

但是，我想动态更改坐标，因此创建了以下 Javascript 代码来读取 JSON，并且我希望将其转换为正确的数组格式以使用 API。但是，肯定有问题，因为动态列表没有在地图上显示线。

    var flightPlanCoordinates_dynamic = [];
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var myObj = JSON.parse(this.responseText);
            for (var i = 0; i < myObj.lat.length; i++) {
                flightPlanCoordinates_dynamic[i] = {'lat' : myObj.lat[i], 'lng' : myObj.lng[i]};
            }

        }
    };
    xmlhttp.open("GET", "myJSONfile.py", true);
    xmlhttp.send();

我的 JSON 输出看起来像这样（并且被 Javascript 正确读取）：

{"lng": [-2.588658, -2.238049, -1.899454], "lat": [51.470544, 51.867286, 52.531292]}

如果我将这两个变量都打印到控制台，我会得到类似的结果，但它明显不同，API 可以忽略（无错误）我的动态生成的内容。

Screenshot of the Console Output

任何帮助将不胜感激。

编辑： 以非工作形式发布整个代码，不带正文 HTML 标记：

<style>
  #map {
    height: 70%;
    width: 95%;
  }
</style>
<div id="map"></div>
<script>
  function initMap() {
    var flightPlanCoordinates_dynamic = [];
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var myObj = JSON.parse(this.responseText);
            for (var i = 0; i < myObj.lat.length; i++) {
                flightPlanCoordinates_dynamic[i] = {'lat' : myObj.lat[i], 'lng' : myObj.lng[i]};
            }

        }
    };
    xmlhttp.open("GET", "myJSONfile.py", true); //returns {"lng": [-2.588658, -2.238049, -1.899454], "lat": [51.470544, 51.867286, 52.531292]}
    xmlhttp.send();

    console.log(flightPlanCoordinates_dynamic)

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: {51.470544, lng: -2.588658},
      mapTypeId: 'roadmap',
    });

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

    flightPath.setMap(map);
  }

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

Answer 1

正如我在评论中提到的，这里的问题似乎是 Google 需要一个对象数组：

var flightPlanCoordinates_static = [
  {lat: 51.470544, lng: -2.588658},
  {lat: 51.867286, lng: -2.238049},
  {lat: 52.531292, lng: -1.899454}
];

但是被提供了一个数组对象：

{"lng": [-2.588658, -2.238049, -1.899454], "lat": [51.470544, 51.867286, 52.531292]}