Question

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

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

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

我无法弄清楚如何运行我的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

非常感谢任何帮助！

由于

Answer 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

在googlemaps中添加折线数组作为不同的行

1 个答案: