如何排序經緯度點，以便在創建多邊形時，線條不會相交

我正在谷歌地圖中顯示4個標記和一個多邊形以將這4個標記作爲標記連接，但我試過的代碼給我一些兩個三角形多邊形（線是交叉連接）。如何修復代碼，以便這些行不交叉連接。如何排序經緯度點，以便在創建多邊形時，線條不會相交

function initMap() { 
 
    var beaches = [ 
 
    ["a", 40.4476, -83.0767], 
 
    ["b", 40.3655, -83.0441], 
 
    ["d", 40.5943, -83.0128], 
 
    ["e", 40.5113, -82.6063] 
 
    ]; 
 
    var triangleCoords = [{ 
 
     lat: 40.4476, 
 
     lng: -83.0767, 
 
     'name': 'n' 
 
    }, 
 
    { 
 
     lat: 40.3655, 
 
     lng: -83.0441, 
 
     'name': 'n' 
 
    }, 
 
    { 
 
     lat: 40.5943, 
 
     lng: -83.0128, 
 
     'name': 'n' 
 
    }, 
 
    { 
 
     lat: 40.5113, 
 
     lng: -82.6063, 
 
     'name': 'n' 
 
    } 
 
    ]; 
 

 
    function SortByName(x, y) { 
 
    return ((x.name == y.name) ? 0 : ((x.name > y.name) ? 1 : -1)); 
 
    } 
 
    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 
 
    }); 
 
    } 
 
    var markers = []; 
 
    var map; 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10, 
 
    center: { 
 
     lat: 40.5943, 
 
     lng: -83.0128 
 
    }, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker, i; 
 
    var shape = { 
 
    coords: [1, 1, 1, 20, 18, 20, 18, 1], 
 
    type: 'poly' 
 
    }; 
 
    var count = 0; 
 
    $.each(polygroups, function(i, value) { 
 
    var users = { 
 
     0: { 
 
     color: '#f45942' 
 
     }, 
 
     1: { 
 
     color: '#f4df41' 
 
     }, 
 
     2: { 
 
     color: '#58f441' 
 
     } 
 
    } 
 
    var bermudaTriangle = new google.maps.Polygon({ 
 
     paths: value, 
 
     strokeColor: users[count].color, 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 4, 
 
     fillColor: users[count].color, 
 
     fillOpacity: 0.0 
 
    }); 
 
    bermudaTriangle.setMap(map); 
 
    count++; 
 
    }); 
 

 
    for (i = 0; i < beaches.length; i++) { 
 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(beaches[i][1], beaches[i][2]), 
 
     map: map 
 
    }); 
 
    markers.push(marker); 
 
    } 
 
}

#map { 
 
    height: 100%; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="map"></div> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBA6r9FMT7APwfx0OfOKj8IZwq9gkCPN-I&callback=initMap"> 
 
</script>

來源

2017-07-07 nas

你在錯誤的順序列出他們...

var triangleCoords = [{ 
    lat: 40.4476, 
    lng: -83.0767, 
    'name': 'n' 
    }, { 
    lat: 40.3655, 
    lng: -83.0441, 
    'name': 'n' 
    }, { 
    lat: 40.5113, 
    lng: -82.6063, 
    'name': 'n' 
    }, { 
    lat: 40.5943, 
    lng: -83.0128, 
    'name': 'n' 
    }];

帶給你方...

的jsfiddle：https://jsfiddle.net/cmjcs5eL/20/

來源

2017-07-07 09:03:27

我有基於asc lat做出訂單？ – nas

不，列表的順序是添加標記的順序。如果他們在你想要的行中相互追隨，他們可以遍佈整個地方：https：//jsfiddle.net/cmjcs5eL/22/數組被顛倒過來，仍然是一個多邊形正方形，因爲它們都依然彼此相關 –

那些數據來自數據庫的結果，我只提供了四個這個問題的假人。那麼我怎麼知道哪個點跟隨哪個。 – nas

如何排序經緯度點，以便在創建多邊形時，線條不會相交

回答

相關問題