如何在地圖中顯示多個多邊形

Question

我想在Google地圖中顯示多個多邊形。我有一個下面的對象。

var triangleCoords = [ 
    {lat: 25.774, lng: -80.190, 'name': 's'}, 
    {lat: 18.466, lng: -66.118, 'name': 's'}, 
    {lat: 32.321, lng: -64.757, 'name': 'a'}, 
    {lat: 25.774, lng: -80.190, 'name': 'a'}, 
    {lat: 32.451, lng: -64.797, 'name': 'c'}, 
    {lat: 26.774, lng: -80.190, 'name': 'c'} 
]; 

從上面給出的座標我必須根據名稱進行過濾。同名的值應該是單個多邊形，所以在這種情況下，我應該有3個多邊形。我不知道如何打破這個triangleCoords，以便我可以製作一個循環，並使用下面的代碼來顯示它。

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

Answer 1

請嘗試以下代碼在Google地圖上創建多個多邊形。

var map; 
function initialize() { 

    var mapOptions = { 
     center: new google.maps.LatLng(30.653456, 76.732375), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var infoWindow = new google.maps.InfoWindow(); 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
} 

var triangleCoords = [ 
{ lat:30.655993, lng: 76.732375, 'name': 's' }, 
{ lat: 30.651379, lng: 76.735808, 'name': 's' }, 
{ lat: 30.653456, lng: 76.729682, 'name': 's' }, 
{ lat: 30.687375, lng: 76.749161, 'name': 'b' }, 
{ lat: 30.681425, lng: 76.754381, 'name': 'b' }, 
{ lat: 30.674744, lng: 76.742606, 'name': 'b' }, 
{ lat: 30.680694, lng: 76.737873, 'name': 'b' } 
    ]; 

    function SortByName(x, y) { 
     return ((x.name == y.name) ? 0 : ((x.name > y.name) ? 1 : -1)); 
    } 

    // Call Sort By Name 
    triangleCoords.sort(SortByName); 
    var polygroups = {}; 
    for (var i = 0; i < triangleCoords.length; i++) { 
     var groupName = triangleCoords[i].name; 
     if (!polygroups[groupName]) { 
      polygroups[groupName] = []; 
     } 
     polygroups[groupName].push({ lat: triangleCoords[i].lat, lng: triangleCoords[i].lng}); 
    } 

    $.each(polygroups, function (i, value) { 
     debugger; 
     var bermudaTriangle = new google.maps.Polygon({ 
      paths: value, 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35 
     }); 
     bermudaTriangle.setMap(map); 
    });