どのように座標の配列を使用してGoogleマップAPIでポリゴンを描画するには？

Question

JavaScriptを使い慣れていません。また、GoogleマップAPIを使用してポリゴンを描画しようとしています。

しかし

var trianglecoords=[ 
      {lat: 18.466, lng: -66.518}, 
      {lat: 18.466, lng: -66.118}, 
      {lat: 18.166, lng: -66.118}, 
       ]; 

私のフォーマットは次のとおりです：

var trianglecoords=[ 
        [18.466,-66.518], 
        [18.466,-66.118], 
        [18.166,-66.118], 
         ]; 

私はマップ内の三角形を見ることができない私の形式を使用してgoogle.maps.Polygonsのデフォルトのパスは、次の形式でJSONを受け入れる機能します。誰でも助けてくれますか？

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 5, 
    center: {lat: 24.886, lng: -70.268}, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 

    // Define the LatLng coordinates for the polygon's path. 
    var triangleCoords = [ 
    [25.774, -80.190], 
    [18.466, -66.118], 
    [32.321,-64.757], 
    [25.774, -80.190] 
    ]; 

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

Answer 1

あなたのフォーマットが動作しません。

は、ここに私のコードです。 google.maps.LatLngオブジェクトまたはgoogle.maps.LatLngLiteralオブジェクトの配列に変換する必要があります。

いずれか：

var points=[]; 
for(var i=0; i<triangleCoords.length; i++) { 
    points.push(new google.maps.LatLng(triangleCoords[i][0], 
            triangleCoords[i][1])); 
} 
// Construct the polygon. 
var bermudaTriangle = new google.maps.Polygon({ 
    paths: points, 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35 
}); 
bermudaTriangle.setMap(map); 

または：

var points=[]; 
for(var i=0; i<triangleCoords.length; i++) { 
    points.push({ 
    lat: triangleCoords[i][0], 
    lng: triangleCoords[i][1] 
    }); 
} 
// Construct the polygon. 
var bermudaTriangle = new google.maps.Polygon({ 
    paths: points, 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35 
}); 
bermudaTriangle.setMap(map); 

コードスニペット：

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 5, 
 
    center: { 
 
     lat: 24.886, 
 
     lng: -70.268 
 
    }, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }); 
 

 
    // Define the LatLng coordinates for the polygon's path. 
 
    var triangleCoords = [ 
 
    [25.774, -80.190], 
 
    [18.466, -66.118], 
 
    [32.321, -64.757], 
 
    [25.774, -80.190] 
 
    ]; 
 
    var points = []; 
 
    for (var i = 0; i < triangleCoords.length; i++) { 
 
    points.push({ 
 
     lat: triangleCoords[i][0], 
 
     lng: triangleCoords[i][1] 
 
    }); 
 
    } 
 
    // Construct the polygon. 
 
    var bermudaTriangle = new google.maps.Polygon({ 
 
    paths: points, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 2, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35 
 
    }); 
 
    bermudaTriangle.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>