在谷歌地图中添加折线数组作为不同的线答案

【问题标题】：add array of polylines as distinct lines in googlemaps在谷歌地图中添加折线数组作为不同的线
【发布时间】：2015-11-13 01:23:30
【问题描述】：

我正在使用 googlemaps api。我一直在寻找这个 Q 的答案，发现了一些类似的问题，但没有一个对我有用。

我想将一组折线添加到 googlemap 作为具有不同颜色的不同线，而不是一条连续线。

我正在从 json 文件中提取我的 lat lng 坐标。折线数组（它们本身就是 lat lng 坐标数组）的长度是可变的。

我不知道如何运行我的 polyline.setMap 然后再次运行它，直到数组中没有更多的折线集。

这里是问题中的代码：

paths = [];
allStrms = [];  
$.getJSON("json/basin/"+file+"", function(json) { 

// iterate through each year array in JSON
for (i = 0; i < json.year.length; i++) {

//only grab data from 2013
if(json.year[i]["@attributes"].id == '2013') {

//iterate through the latLng array in each storm object
for (p=0; p < json.year[i].storm.latLng.length; p++) {

//get each pair of lat / lng coordinates from latLng array

var path = new google.maps.LatLng(parseFloat(json.year[i].storm.latLng[p].latitude), parseFloat(json.year[i].storm.latLng[p].longitude));

//push to paths array 
$.each(path, function(){
        paths.push(path);
  });
}

//push all paths to allStrms array
allStrms.push(paths);


for(p=0; p < json.year[i].storm.latLng.length; p++) {

function addPolyline() {

    for(t=0;t<allStrms.length;t++) {

        polyline = new google.maps.Polyline({
            path: allStrms[t],
            geodesic: true,
            strokeColor: 'yellow',
            strokeOpacity: 1,
            strokeWeight: 2
          });

       }

       polyline.setMap(map);

      //end for loop
     }


//end for loop - json.year[i].storm.latLng
    }

//end if condition for year 2013
 }


// end initial for loop
}


  addPolyline();

 //end $.getJSON
});

我如何设置它以运行我的折线然后停止、再次运行、停止等等...直到所有线都在地图上并且不同？

下面是实际代码。该页面在页面加载时将一组折线作为杂乱的线加载。

http://wx.wpri.com/html/testing/ht/bt-v2.html

任何帮助将不胜感激！

谢谢

【问题讨论】：

请定义 var 路径和 var allStrms 中的内容
你能缩进你的代码吗？（无论是在问题中还是在您的实时页面上；至少如果您需要帮助，我不知道您的 getJSON 成功函数在哪里结束......）
证明您问题中的问题的Minimal, Complete, Tested and Readable example 也会有所帮助。
对此感到抱歉。让我清理/删除无关代码，然后我将编辑问题中的代码以包含一个完整的 $.getJSON 函数来解决我的问题。
我的猜测是您的问题与 $.getJSON 调用无关，而是您如何处理回调函数中返回的数据的问题（您将所有路径放入单个数组），因此您可能只需要一个以正确格式处理来自 JSON 的多条折线的示例。

标签： javascript jquery arrays google-maps-api-3

【解决方案1】：

将单个折线的每个 lat/lng 对推送到单个数组中：

if (json.year[i]["@attributes"].id == '2013') {
    var path = [];
    //iterate through the latLng array in each storm object
    for (p = 0; p < json.year[i].storm.latLng.length; p++) {
        //get each pair of lat / lng coordinates from latLng array
        var point = new google.maps.LatLng(
              parseFloat(json.year[i].storm.latLng[p].latitude), 
              parseFloat(json.year[i].storm.latLng[p].longitude)
            );
        path.push(point);
    }

将该路径推送到您的 allStrm 数组（并创建它的折线）：

//push all paths to allStrms array
allStrms.push(path);
var polyline = new google.maps.Polyline({
        path: path,
        geodesic: true,
        strokeColor: 'yellow',
        strokeOpacity: 1,
        strokeWeight: 2
    });
 polyline.setMap(map);

完整的 $getJSON 函数：

$.getJSON("http://wx.wpri.com/html/testing/ht/json/basin/NA.min.json", function(json) { 
  var json = JSON.parse(jsonStr);
  // iterate through each year array in JSON
  for (i = 0; i < json.year.length; i++) {
    //only grab data from 2013
    if (json.year[i]["@attributes"].id == '2013') {
        var path = [];
        //iterate through the latLng array in each storm object
        for (p = 0; p < json.year[i].storm.latLng.length; p++) {
            //get each pair of lat / lng coordinates from latLng array
            var point = new google.maps.LatLng(
                  parseFloat(json.year[i].storm.latLng[p].latitude), 
                  parseFloat(json.year[i].storm.latLng[p].longitude)
                );
            path.push(point);
        }
        //push all paths to allStrms array
        allStrms.push(path);
        var polyline = new google.maps.Polyline({
                path: path,
                geodesic: true,
                strokeColor: 'yellow',
                strokeOpacity: 1,
                strokeWeight: 2
            });
         polyline.setMap(map);
    }
  }
  //end $.getJSON
});

proof of concept fiddle

【讨论】：