javascript - 如何通过连接 Google map 中的外部点来创建多边形

Question

我正在尝试根据我这里的数据https://jsoneditoronline.org/?id=7a7287f99c0964ffd6125b4bb48a2e50中的送货费用为一家餐厅创建多个多边形。

这是我已经拥有的 https://codepen.io/mani619cash/pen/mpaqQq?editors=1000

它根据文本区域中显示的输入数据创建类似的内容

我想要的是类似于下图的东西，连接外部图像以生成多边形。

目前，我尝试按纬度、经度对每个多边形中的数据进行排序，但多边形仍然困惑

Answer 1

按距中心的方位对坐标进行排序(仅适用于 simple 多边形)。从我对这个问题的回答之一:OSM to Google Maps polygons

排序函数:

function sortFunc(a, b) {
  var bearA = google.maps.geometry.spherical.computeHeading(centerPt, a);
  var bearB = google.maps.geometry.spherical.computeHeading(centerPt, b);
  console.log(bearA + ":" + bearB);
  return (bearA - bearB);
}

对顶点进行排序的代码:

var bounds = new google.maps.LatLngBounds();
for (direction in data_json[hotel]['polygon'][region]) {
  var temp = new google.maps.LatLng(data_json[hotel]['polygon'][region][direction]['lat'], data_json[hotel]['polygon'][region][direction]['lon'])
  triangleCoords.push(temp);
  bounds.extend(temp);
}
// sort coordinates
centerPt = bounds.getCenter();
triangleCoords = triangleCoords.sort(sortFunc);

// Styling & Controls
myPolygon = new google.maps.Polygon({
  paths: triangleCoords,
  draggable: true, // turn off if it gets annoying
  editable: true,
  strokeColor: color_of_this,
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: color_of_this,
  fillOpacity: 0.35
});

proof of concept fiddle

代码片段:

function initialize() {
  var data_json = $("#info").val();
  data_json = JSON.parse(data_json);
  var myLatLng = new google.maps.LatLng(data_json[0]['latitude'], data_json[0]['longitude']);
  var mapOptions = {
    zoom: 13,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.RoadMap
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (hotel in data_json) {
    for (region in data_json[hotel]['polygon']) {
      var triangleCoords = [];
      var color_of_this = "#" + ((1 << 24) * Math.random() | 0).toString(16);
      var bounds = new google.maps.LatLngBounds();
      for (direction in data_json[hotel]['polygon'][region]) {
        var temp = new google.maps.LatLng(data_json[hotel]['polygon'][region][direction]['lat'], data_json[hotel]['polygon'][region][direction]['lon'])
        triangleCoords.push(temp);
        bounds.extend(temp);
      }
      // sort coordinates
      centerPt = bounds.getCenter();
      triangleCoords = triangleCoords.sort(sortFunc);

      // Styling & Controls
      myPolygon = new google.maps.Polygon({
        paths: triangleCoords,
        draggable: true, // turn off if it gets annoying
        editable: true,
        strokeColor: color_of_this,
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: color_of_this,
        fillOpacity: 0.35
      });
      myPolygon.setMap(map);
      new google.maps.Marker({
        position: myLatLng,
        map: map
      });
    }
    map.fitBounds(bounds);
  }
}

function sortFunc(a, b) {
  var bearA = google.maps.geometry.spherical.computeHeading(centerPt, a);
  var bearB = google.maps.geometry.spherical.computeHeading(centerPt, b);
  return (bearA - bearB);
}
//Display Coordinates below map
function getPolygonCoords() {
  var len = myPolygon.getPath().getLength();
  var htmlStr = "";
  for (var i = 0; i < len; i++) {
    htmlStr += "new google.maps.LatLng(" + myPolygon.getPath().getAt(i).toUrlValue(5) + "), ";
  }
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map-canvas"></div>
<textarea id="info">[ { "latitude": "40.738057", "polygon": { "0": { "direction6": { "lat": 40.756056999999956, "delivery_estimate": 45, "lon": -74.034318, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction2": { "lat": 40.74755700000004, "delivery_estimate":
  45, "lon": -74.02481799999995, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction7": { "lat": 40.74455700000003, "delivery_estimate": 45, "lon": -74.04081800000003, "delivery_fee": 200, "delivery_offered_to_diner_location":
  true }, "direction3": { "lat": 40.738057, "delivery_estimate": 45, "lon": -74.02731799999997, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction4": { "lat": 40.738057, "delivery_estimate": 45, "lon": -74.04331800000004, "delivery_fee":
  200, "delivery_offered_to_diner_location": true }, "direction5": { "lat": 40.736057, "delivery_estimate": 45, "lon": -74.034318, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction1": { "lat": 40.73605699999999, "delivery_estimate":
  45, "lon": -74.03631800000001, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction8": { "lat": 40.735556999999986, "delivery_estimate": 45, "lon": -74.03181799999999, "delivery_fee": 200, "delivery_offered_to_diner_location":
  true } }, "1": { "direction6": { "lat": 40.77505699999991, "delivery_estimate": 45, "lon": -74.034318, "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction7": { "lat": 40.7590570000001, "delivery_estimate": 45, "lon": -74.0553180000001,
  "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction2": { "lat": 40.752057000000065, "delivery_estimate": 45, "lon": -74.02031799999993, "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction3": { "lat":
  40.738057, "delivery_estimate": 45, "lon": -74.02331799999995, "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction4": { "lat": 40.738057, "delivery_estimate": 45, "lon": -74.06431800000014, "delivery_fee": 500, "delivery_offered_to_diner_location":
  false }, "direction8": { "lat": 40.73155699999997, "delivery_estimate": 45, "lon": -74.02781799999997, "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction1": { "lat": 40.71605699999989, "delivery_estimate": 45, "lon": -74.0563180000001,
  "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction5": { "lat": 40.714057000000054, "delivery_estimate": 45, "lon": -74.034318, "delivery_fee": 500, "delivery_offered_to_diner_location": false } } }, "id": "287478", "longitude":
  "-74.034318", "name": "Tony Boloney's" } ]</textarea>