如何在Google地圖上從JSON繪製多邊形

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