谷歌地图 v3，使用公里和度数创建多边形

Question

在互联网上，我可以找到许多如何创建 google map v3 多边形的示例。

像这样：https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays

但我需要创建多边形，而不是从 Lat 和 Lng，而是公里。

例子：

1 point: LatLng(25.774252, -80.190262);
2 point: 20km and 90 deg.
3 point:  15km and 45 deg.

有可能吗？

Answer 1

使用geometry library computeOffset 方法。

computeOffset(from:LatLng, distance:number, heading:number, radius?:number) |纬度 |返回从指定航向中的原点移动一段距离所产生的 La​​tLng（以从北顺时针方向的度数表示）。

var initialPoint = new google.maps.LatLng(25.774252, -80.190262);
var triangleCoords = [
      initialPoint,
      google.maps.geometry.spherical.computeOffset(initialPoint,20000,90),
      google.maps.geometry.spherical.computeOffset(initialPoint,15000,45)
  ];
  // Construct the polygon.
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);

working example

代码 sn-p：

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var initialPoint = new google.maps.LatLng(25.774252, -80.190262);
  var triangleCoords = [
    initialPoint,
    google.maps.geometry.spherical.computeOffset(initialPoint, 20000, 90),
    google.maps.geometry.spherical.computeOffset(initialPoint, 15000, 45)
  ];
  // Construct the polygon.
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);

  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < bermudaTriangle.getPath().getLength(); i++) {
    bounds.extend(bermudaTriangle.getPath().getAt(i));
  }

  var initialPoint2 = new google.maps.LatLng(25.77, -80.190262);
  var triangleCoords2 = [
    initialPoint2,
    google.maps.geometry.spherical.computeOffset(initialPoint2, 20000, 90),
    google.maps.geometry.spherical.computeOffset(initialPoint2, 15000, 135)
  ];
  // Construct the polygon.
  bermudaTriangle2 = new google.maps.Polygon({
    paths: triangleCoords2,
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#0000FF',
    fillOpacity: 0.35
  });

  bermudaTriangle2.setMap(map);

  for (var i = 0; i < bermudaTriangle2.getPath().getLength(); i++) {
    bounds.extend(bermudaTriangle2.getPath().getAt(i));
  }


  map.fitBounds(bounds);

  // Add a listener for the click event.
  google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
  google.maps.event.addListener(bermudaTriangle2, 'click', showArrays);

  infoWindow = new google.maps.InfoWindow();
}

/** @this {google.maps.Polygon} */
function showArrays(event) {

  // Since this polygon has only one path, we can call getPath()
  // to return the MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
    'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
    '<br>';

  // Iterate over the vertices.
  for (var i = 0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
      xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
<div id="map-canvas"></div>