Question

I'm trying to access lat/lng of polygons within a nested JSON file and trying to draw them using new google.maps.Polygon(), but having some troubles.

UPDATE-2: I am able to draw polygons, but it only draws the first polygon, not all 3: http://jsfiddle.net/vprbqaLm/10/

UPDATE: Check out my latest JSFiddle here: http://jsfiddle.net/vprbqaLm/9/ Now I can't seem to read the coordinates as I get the following error: Uncaught TypeError: Cannot read property 'coordinates' of undefined

Here is what my code looks like:

var coords = data.features.geometry.coordinates;
var paths = [];
for (i = 0; i < coords.length; i++) {
    for (j = 0; j < coords[i].length; j++) {
        var path = [];
        for (k = 0; k < coords[i][j].length; k++) {
            var ll = new google.maps.LatLng(coords[i][j][k][1], coords[i][j][k][0]);
            path.push(ll);
        }
        paths.push(path);
    }
}
var polygon = new google.maps.Polygon({
    paths: paths,
    strokeColor: "#FF7800",
    strokeOpacity: 1,
    strokeWeight: 5,
    fillColor: "#46461F",
    fillOpacity: 1
});
return polygon;

Here is the sample JSON file:

    var data = {
    "type": "FeatureCollection",
        "features": [{
        "type": "Feature",
            "id": 1,
            "properties": {
            "Name": "",
                "description": "",
                "timestamp": "",
                "begin": "",
                "end": "",
                "altitudeMode": "clampToGround",
                "tessellate": 1,
                "extrude": -1,
                "visibility": -1
        },
            "geometry": {
            "type": "Polygon",
                "coordinates": [
                [
                    [-83.126571,
                    42.348706],
                    [-83.126520,
                    42.348634],
                    [-83.126516,
                    42.348635],
                    [-83.126147,
                    42.348778],
                    [-83.126144,
                    42.348780],
                    [-83.126195,
                    42.348852],
                    [-83.126199,
                    42.348851],
                    [-83.126568,
                    42.348708],
                    [-83.126571,
                    42.348706]
                ]
            ]
        }
    }, {
        "type": "Feature",
            "id": 2,
            "properties": {
            "Name": "",
                "description": "",
                "timestamp": "",
                "begin": "",
                "end": "",
                "altitudeMode": "clampToGround",
                "tessellate": 1,
                "extrude": -1,
                "visibility": -1
        },
            "geometry": {
            "type": "Polygon",
                "coordinates": [
                [
                    [-83.132805,
                    42.356496],
                    [-83.132753,
                    42.356423],
                    [-83.132751,
                    42.356424],
                    [-83.132243,
                    42.356624],
                    [-83.132241,
                    42.356625],
                    [-83.132294,
                    42.356698],
                    [-83.132296,
                    42.356697],
                    [-83.132802,
                    42.356497],
                    [-83.132805,
                    42.356496]
                ]
            ]
        }
    }, {
        "type": "Feature",
            "id": 3,
            "properties": {
            "Name": "",
                "description": "",
                "timestamp": "",
                "begin": "",
                "end": "",
                "altitudeMode": "clampToGround",
                "tessellate": 1,
                "extrude": -1,
                "visibility": -1
        },
            "geometry": {
            "type": "Polygon",
                "coordinates": [
                [
                    [-83.126776,
                    42.351813],
                    [-83.126492,
                    42.351413],
                    [-83.126189,
                    42.351525],
                    [-83.126191,
                    42.351528],
                    [-83.126376,
                    42.351807],
                    [-83.126776,
                    42.351813]
                ]
            ]
        }
    }]
};

Answer 1

Two suggestion

first:: you can assign the coordinates without the

  $.each(polygons, function (i, n) {
   .....
  }

you already have the cooordinate in javascrip format [[......],[.....]] then you don't need to reassign to paths[]

second seem you have a nested [] of to much try with your format and then with a minus nested level.

JSON coordinates literal example :

[[{"lat": 41.650299987709538, "lng": 12.536399034779624}, {"lat": 41.650331001957937, "lng": 12.53657301029202}, {"lat": 41.650344029686487, "lng": 12.537146999950506}, {"lat": 41.650474995651187 , "lng": 12.537842047638419}, {"lat": 41.650461970948285, "lng": 12.538146026115472}, {"lat": 41.65040398326272, "lng": 12.538020010393916}, {"lat": 41.650271995260688, "lng": 12.537231036701897}, {"lat": 41.650243023870289, "lng": 12.536492993378628}, {"lat": 41.650299987709538, "lng": 12.536399034779624}]]

If you can format as in the sample you can do the direct allocation otherwise you are obliged to convert each pair of numbers in the coordinates, add them to an array and then assign it to paths.

Accessing Coordinates in Nested JSON File

1 个答案: