帶數組的數組json對象

Question

我正嘗試在谷歌地圖上使用google地圖API創建兩個多邊形。

我收到以下錯誤：

Error: Invalid value for constructor parameter 0: -94.963194,39.316858,-94.95967,39.32199,-94.95905,39.32172,-94.95846,39.3214,-94.95792,39.32104,-94.95742,39.32064,-94.95698,39.32021,-94.95625,39.31927,-94.95599,39.31876,-94.95578,39.31824,-94.95564,39.3177,-94.95557,39.31716,-94.95557,39.31661,-94.963194,39.316858

我希望有人能幫忙解釋一下我做錯了，並親切地提供了一個解決方案。

<script 
    src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"> 
</script> 
<script> 
var map; 

function initialize() { 
    var kansas_city = new google.maps.LatLng(39.00495613,-94.64780668); 
    var mapOptions = { 
     zoom: 10, 
     center: kansas_city, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     // Create a <script> tag and set the USGS URL as the source. 
     var script = document.createElement('script'); 
     script.src = 'sector.json'; 
     document.getElementsByTagName('head')[0].appendChild(script); 
} 

    // Loop through the results array and place a marker for each 
    // set of coordinates. 
    window.sector_callback = function(results) { 
    for (var i = 0; i < results.features.length; i++) { 
     var coords = results.features[i].geometry.coordinates; 
     alert(coords); 
     var polygons = new google.maps.Polygon({ 
     path: coords, 
     map: map 
     }); 
    } 
} 
</script> 

JSON代碼：

sector_callback({ 
    "type": "FeatureCollection", 
    "features": [{ 
     "type": "Feature", 
     "properties": { 
      "Name": "1_1", 
      "Description": "" 
     }, 
     "geometry": { 
      "type": "Polygon", 
      "coordinates": [ 
       [ 
        [-94.963194, 39.316858], 
        [-94.959670, 39.321990], 
        [-94.959050, 39.321720], 
        [-94.958460, 39.321400], 
        [-94.957920, 39.321040], 
        [-94.957420, 39.320640], 
        [-94.956980, 39.320210], 
        [-94.956250, 39.319270], 
        [-94.955990, 39.318760], 
        [-94.955780, 39.318240], 
        [-94.955640, 39.317700], 
        [-94.955570, 39.317160], 
        [-94.955570, 39.316610], 
        [-94.963194, 39.316858] 
       ] 
      ] 
     } 
    }, { 
     "type": "Feature", 
     "properties": { 
      "Name": "214_1", 
      "Description": "" 
     }, 
     "geometry": { 
      "type": "Polygon", 
      "coordinates": [ 
       [ 
        [-94.783917, 39.083417], 
        [-94.776470, 39.084670], 
        [-94.776340, 39.084140], 
        [-94.776290, 39.083590], 
        [-94.776300, 39.083040], 
        [-94.776380, 39.082500], 
        [-94.776530, 39.081960], 
        [-94.777020, 39.080940], 
        [-94.777360, 39.080460], 
        [-94.777760, 39.080000], 
        [-94.778210, 39.079570], 
        [-94.778710, 39.079180], 
        [-94.779260, 39.078830], 
        [-94.783917, 39.083417] 
       ] 
      ] 
     } 
    }] 
}); 

Answer 1

您的多邊形數組是一個數組的數組（支持多邊形中的多個路徑）。 要訪問你需要做的數字（假設你有一個單一的路徑簡單的多邊形）：

var coords = results.features[i].geometry.coordinates[0]; 

然後將其轉換爲google.maps.LatLng物件：

path.push(new google.maps.LatLng(coords[j][1], coords[j][0])); 

Working example

Answer 2

陣列中的JS循環不應該做的默認方式。瀏覽器將在迭代的每一步中查找results.features.length。這是出於速度考慮。

window.sector_callback = function(results) { 
    for (var i = 0, j = results.features.length; i < j; i++) { 
     var coords = results.features[i].geometry.coordinates; 
     alert(coords); 
     var polygons = new google.maps.Polygon({ 
     path: coords, 
     map: map 
     }); 
    } 
} 

要知道答案，請查看谷歌地圖API中THIS QUESTION

Answer 3

一切使用谷歌的google.maps.LatLng基於數據結構的需要。因爲在你的JSON數據的值是[longitude, latitude]，你需要創建多邊形之前建立google.maps.LatLng對象了出來：

window.sector_callback = function(results) { 
    for (var i = 0, len = results.features.length; i < len; i++) { 
    var coords = results.features[i].geometry.coordinates[0]; 
    var path = []; 

    for (var j = 0, len2 = coords.length; j < len2; j++){ 
     path.push(new google.maps.LatLng(coords[j][1], coords[j][0])); 
    } 

    var polygons = new google.maps.Polygon({ 
     path: path, 
     map: map 
    }); 
    } 
} 

編輯：我不得不指定0th元素爲座標，糟糕！