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个多边形。我不知道如何打破这个三角形Coords，以便我可以使用以下代码进行循环并显示它。

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);
    });

如何在地图中显示多个多边形

1 个答案: