Question

我有一个包含两个多边形的JSON字符串。你能告诉我如何更新以下代码来循环和解析JSON下面的两个多边形

 // Construct the polygon.
  polys = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  polys.setMap(map);
}

，JSON文件如下：

[
   {
      "type":"POL",
      "id":0,
      "geometry":[
         [
            49.27026877996669,
            -122.8927230834961
         ],
         [
            49.2489827405684,
            -122.91366577148438
         ],
         [
            49.23732754665601,
            -122.86869049072266
         ]
      ]
   },
   {
      "type":"POL",
      "id":1,
      "geometry":[
         [
            49.235310022288814,
            -122.90027618408203
         ],
         [
            49.229032752799334,
            -122.91950225830078
         ],
         [
            49.2202880838794,
            -122.88002014160156
         ]
      ]
   }
]

我不确定json数据格式是否正确，说实话，不确定如何在代码中声明它。能帮我解决一下如何运行它吗？感谢

Answer 1

(function() {
  var polygons = [];

  var json = [
     {
        "type":"POL",
        "id":0,
        "geometry":[
           [
              49.27026877996669,
              -122.8927230834961
           ],
           [
              49.2489827405684,
              -122.91366577148438
           ],
           [
              49.23732754665601,
              -122.86869049072266
           ]
        ]
     },
     {
        "type":"POL",
        "id":1,
        "geometry":[
           [
              49.235310022288814,
              -122.90027618408203
           ],
           [
              49.229032752799334,
              -122.91950225830078
           ],
           [
              49.2202880838794,
              -122.88002014160156
           ]
        ]
     }
  ];

  json.forEach(function(record){
     var path = [];
     record.geometry.forEach(function(point){
        path.push(new google.Maps.LatLng(point[0], point[1]));
     });

     // Construct the polygon.
     var polygon = new google.maps.Polygon({
        paths: path,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map
     });

     polygons.push(polygon);
  });
})();

Answer 2

每个都是单独的多边形对象，还是单个复杂多边形（多个闭环）？首先，您需要设置new google.maps.MVCArray()并存储其中的每个点。为此，您需要在JSON中遍历每个对象的几何标记，并在每个对象中创建一个new google.maps.LatLng( geometry[i][0], geometry[i][0])以推入MVCArray。

完成后，您可以将多边形路径设置为创建的MVCArray。如果要创建具有多个路径的单个多边形对象，则需要将MVCArray推送到父MVCArray并将其设置为多边形的路径。

这样的事情：

function parseJSON( json ) {
    var types = [],
        polygons = [];

    //Setup all the paths inside polygons
    json.forEach( function(rec) {
        var loc = types.indexOf(rec.type);
        //Setup new type if it doesn't exist
        if( loc === -1 ) {
            loc = types.length;
            types.push( rec.type );
            polygons.push( new google.maps.MVCArray() );
        }
        var arr = new google.maps.MVCArray();
        rec.geometry.forEach( function( latLng ) {
            arr.push( new google.maps.LatLng( latLng[0], latLng[1] ) );
        });
        //Each polygons item now is a set of similarly typed set of coordinates
        polygons[loc].push(arr);
    });
    //Loop through finished set
    polygons.forEach( function(polyPath) {
        //Construct polygon using the path provided
        var polygon = new google.maps.Polygon({
            paths: polyPath,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map
        });
    });
}

但这基本上会产生多个复杂的多边形，每个多边形都与它们的类型相关。代码未经测试，但基于使用parseJSON作为回调函数看起来合适。

Answer 3

你有来自JasonSanford的这个可爱的实用工具 - geojson-google-maps

如何在Google Map上从JSON绘制多边形

3 个答案: