Question

我想基于四个坐标在谷歌地图上绘制一个椭圆，就像通过API提供的当前“矩形”方法一样：

var rectangle = new google.maps.Rectangle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          bounds: new google.maps.LatLngBounds(
            new google.maps.LatLng(33.671068, -116.25128),
            new google.maps.LatLng(33.685282, -116.233942))
        });

（使用边界参数）。

如果失败了，是否有一种简单的方法可以将2个多边形之间的距离转换为测量单位？

Answer 1

您必须自己计算路径。这应该有所帮助：

http://mathworld.wolfram.com/Ellipse.html

编辑：这可能更有用：

http://www.geocodezip.com/v3_MW_example_eshapes.html

Mike Williams' v2 eshapes library的v3端口，支持椭圆（但不支持边界）。

Working example根据地图范围调整大小。

proof of concept fiddle

代码段

var map = null;

var myOptions = {
  zoom: 8,
  center: new google.maps.LatLng(43, -79.5),
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  },
  navigationControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"),
  myOptions);

google.maps.event.addListenerOnce(map, "bounds_changed", function() {
  var bounds = map.getBounds();
  var major_axis = google.maps.geometry.spherical.computeDistanceBetween(bounds.getNorthEast(), new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getNorthEast().lng())) / 2;
  var minor_axis = google.maps.geometry.spherical.computeDistanceBetween(
    new google.maps.LatLng(bounds.getCenter().lat(), bounds.getSouthWest().lng()),
    new google.maps.LatLng(bounds.getCenter().lat(), bounds.getNorthEast().lng())) / 2;

  // === Ellipse ===
  var point = map.getCenter(); // new google.maps.LatLng(43,-78);
  var ellipse = google.maps.Polygon.Ellipse(point, major_axis, minor_axis, 0, "#000000", 2, 1, "#ffff00", 0.5);
  ellipse.setMap(map);
});

// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/   
// http://econym.org.uk/gmap/

// EShapes.js
//
// Based on an idea, and some lines of code, by "thetoy" 
//
//   This Javascript is provided by Mike Williams
//   Community Church Javascript Team
//   http://www.bisphamchurch.org.uk/   
//   http://econym.org.uk/gmap/
//
//   This work is licenced under a Creative Commons Licence
//   http://creativecommons.org/licenses/by/2.0/uk/
//
// Version 0.0 04/Apr/2008 Not quite finished yet
// Version 1.0 10/Apr/2008 Initial release
// Version 3.0 12/Oct/2011 Ported to v3 by Lawrence Ross
google.maps.Polygon.Ellipse = function(point, r1, r2, rotation, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts) {
  rotation = rotation || 0;
  return google.maps.Polygon.Shape(point, r1, r2, r1, r2, rotation, 100, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts)
}

google.maps.Polygon.Shape = function(point, r1, r2, r3, r4, rotation, vertexCount, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts, tilt) {
  var rot = -rotation * Math.PI / 180;
  var points = [];
  var latConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat() + 0.1, point.lng())) * 10;
  var lngConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat(), point.lng() + 0.1)) * 10;
  var step = (360 / vertexCount) || 10;

  var flop = -1;
  if (tilt) {
    var I1 = 180 / vertexCount;
  } else {
    var I1 = 0;
  }
  for (var i = I1; i <= 360.001 + I1; i += step) {
    var r1a = flop ? r1 : r3;
    var r2a = flop ? r2 : r4;
    flop = -1 - flop;
    var y = r1a * Math.cos(i * Math.PI / 180);
    var x = r2a * Math.sin(i * Math.PI / 180);
    var lng = (x * Math.cos(rot) - y * Math.sin(rot)) / lngConv;
    var lat = (y * Math.cos(rot) + x * Math.sin(rot)) / latConv;

    points.push(new google.maps.LatLng(point.lat() + lat, point.lng() + lng));
  }
  return (new google.maps.Polygon({
    paths: points,
    strokeColor: strokeColour,
    strokeWeight: strokeWeight,
    strokeOpacity: Strokepacity,
    fillColor: fillColour,
    fillOpacity: fillOpacity
  }))
}

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

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

Answer 2

不确定这是否是您要找的，但是here's a sample I made（在任何地方点击两个点），它会使用function that takes two latLngs and returns a series of points that describe the ellipse，然后将它们添加到多边形。

请注意，它假定边界框相对较小（并且远离极点）以将这些点视为共面。

谷歌地图 - 根据4个坐标绘制椭圆

2 个答案: