如何对纬度和经度点进行排序，以便在创建多边形时，线不相交

Question

我在谷歌地图上工作，显示4个标记和一个多边形，将这4个标记作为标记加入，​​但是我试过给我一些两个三角形多边形的代码（这些线是交叉连接的）。如何修复代码以使这些行不会交叉连接。

＆＃13;

＆＃13;

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

＆＃13;

#map {
  height: 100%;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您列出的顺序错误......

  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/