風格多個GeoJson文件與谷歌地圖Javascript API V3數據層

Question

我有一個網站，使用谷歌API的v3顯示多邊形從JSON文件。

該網站有多個json多邊形，我需要使用不同的顏色對每個多邊形進行樣式設置並創建一個形狀的句柄。

唯一的例子，我可以找到參考純多邊形，而不是JSON文件，有可能會更改JSON文件中的一個例子（我不能做到這一點的JSON文件是靜態

示例代碼：

var map; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: { lat: 45, lng: -90 } 
    }); 


//1st Json file 
map.data.loadGeoJson(
     'https://storage.googleapis.com/mapsdevsite/json/google.json'); 

//2nd json file (same as #1 for illustration purpose) 
map.data.loadGeoJson(
     'https://storage.googleapis.com/mapsdevsite/json/google.json'); 

    // I want to style each Json file independently 
    map.data.setStyle({ 
     fillColor: 'green', 
     strokeWeight: 1 
    }); 

    // map1.setMap(map); 


} 

我設法加入到使用地圖圖層，

data_layer.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json'); 


    // Construct the polygon. 
    var nLayer = new google.maps.JSON({ 
     paths: data_layer, 
     strokeColor: 'green', 
     strokeOpacity: 0.5, 
     strokeWeight: 1, 
     fillColor: 'green', 
     fillOpacity: 0.8 
    }); 

    nLayer.setMap(map); 

我不能去應用到地圖的樣式。任何想法？

Answer 1

我一直在使用Data Layer創建demo on github，我加載多邊形（邊界），我還展示瞭如何保持參照相應的多邊形和更新他們的特定風格。查看this SO answer的片段（我不想在這裏複製它，因爲它是多餘的）。

通知主要是：new_boundary.feature = data_layer.getFeatureById(boundary_id);哪裏存儲參照具體的功能，我可以使用例如爲：

data_layer.overrideStyle(new_boundary.feature, { 
    fillColor: '#0000FF', 
    fillOpacity: 0.9 
}); 

更新哪些樣式隨時隨地它只是更新一個多邊形的是，不是所有的人。因此，如果geoJSON文件中的多邊形具有一些唯一的ID，或者可以將ID分配給所有這些ID，則可以基於此參考和更改其樣式。

另一個選項（未在實例中示出）具有多個數據層。應用程序中可能有多個數據層，例如創建它們是這樣的：

var data_layer = new google.maps.Data({map: map}); 
var data_layer_2 = new google.maps.Data({map: map}); 

，然後將數據加載到他們改變風格：

data_layer.loadGeoJson(
    'https://storage.googleapis.com/mapsdevsite/json/google.json'); 
data_layer_2.loadGeoJson(
    'https://storage.googleapis.com/mapsdevsite/json/google.json'); 
data_layer.setStyle({ 
    fillColor: 'green', 
    strokeWeight: 1 
}); 
data_layer_2.setStyle({ 
    fillColor: 'blue', 
    strokeWeight: 2 
}); 

Answer 2

我想你會想要單獨添加多邊形和他們的風格。從例子（https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays）

// Define the LatLng coordinates for the polygon. 
var triangleCoords = [ 
    {lat: 25.774, lng: -80.190}, 
    {lat: 18.466, lng: -66.118}, 
    {lat: 32.321, lng: -64.757} 
]; 

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