使用谷歌地图在多边形内绘制一个较小的多边形

Question

我正在尝试在 Google 地图上渲染形状（使用 API 的 V3），其中包含相同的形状，只是内部更小。基本上是盒子中的盒子或多边形中的多边形。

对于矩形，我有以下代码，它有效：

var drawEdgesRectangle = function (shape) {
  // shape is the original, parent rectangle

  var NE, SW, childNE, childSW, padding, diagonal, inner;

  // set padding constant to 1 (i.e. 1m distance all around) 
  padding = 1;

  // get diagonal distance from corner
  diagonal = Math.sqrt(2) * padding;

  // get NE of parent
  NE = shape.bounds.getNorthEast();

  // get SW of parent
  SW = shape.bounds.getSouthWest();

  // get child NE, SW
  childNE = google.maps.geometry.spherical.computeOffset(NE, diagonal, 225);
  childSW = google.maps.geometry.spherical.computeOffset(SW, diagonal, 45);

  // render inner shape
  inner = new google.maps.Rectangle({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    bounds: new google.maps.LatLngBounds(
      childSW,
      childNE
    )
  });
}

当然，对多边形执行此操作是另一回事。我知道我可以使用getPaths() 来获取每条线的属性，但是弄清楚如何放置内部线，实际上，确定“内部”的位置对我来说在概念上是相当困难的。

我想知道使用 Google API 是否可以实现我想要实现的目标。

Answer 1

如果你的多边形是“简单的”（中心在多边形“内部”并且没有凹边），一个选项是做类似于你对矩形所做的事情（这是一个四边形多边形符合这些标准）：

使用geometry library：

要包含它：

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

代码（假设全局“poly”等）：

var drawEdgesPoly = function() {
  // shape is the original, parent polygon

  var shape = poly;
  // set padding constant to 1 (i.e. 1m distance all around) 
  padding = 50;

  var vertices = shape.getPath();
  var polybounds = new google.maps.LatLngBounds();
  for (var i = 0; i < vertices.getLength(); i++) {
    polybounds.extend(vertices.getAt(i));
  }
  var center = polybounds.getCenter();
  if (centerMarker && centerMarker.setMap) {
    centerMarker.setMap(null);
  }
  centerMarker = new google.maps.Marker({
    position: center,
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
  if (polylines && (polylines.length > 0)) {
    for (var i = 0; i < polylines.length; i++) {
      polylines[i].setMap(null);
    }
  }
  polylines = [];
  var newPath = [];
  for (var i = 0; i < vertices.getLength(); i++) {
    polylines.push(new google.maps.Polyline({
      path: [center, vertices.getAt(i)],
      map: map,
      strokeWidth: 2,
      strokeColor: 'red'
    }));
    newPath[i] = google.maps.geometry.spherical.computeOffset(vertices.getAt(i),
      padding,
      google.maps.geometry.spherical.computeHeading(vertices.getAt(i), center));
  }
  if (inner && inner.setMap)
    inner.setMap(null);
  // render inner shape
  inner = new google.maps.Polygon({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    editable: false,
    path: newPath
  });
};

proof of concept fiddle 使用代码 sn-p 或 jsfiddle 中的多边形来查看约束。

var map;
var infoWindow;
var poly;
var inner;
var polylines = [];
var centerMarker;

var paths = [
  [
    new google.maps.LatLng(38.872886, -77.054720),
    new google.maps.LatLng(38.872602, -77.058046),
    new google.maps.LatLng(38.870080, -77.058604),
    new google.maps.LatLng(38.868894, -77.055664),
    new google.maps.LatLng(38.870598, -77.053346)
  ]
];

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(38.8714, -77.0556),
    zoom: 15
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  poly = new google.maps.Polygon({
    paths: paths,
    strokeWeight: 3,
    fillColor: '#55FF55',
    fillOpacity: 0.5,
    editable: true
  });

  poly.setMap(map);
  drawEdgesPoly();

  google.maps.event.addListener(poly.getPath(), 'insert_at', drawEdgesPoly);
  google.maps.event.addListener(poly.getPath(), 'remove_at', drawEdgesPoly);
  google.maps.event.addListener(poly.getPath(), 'set_at', drawEdgesPoly);

  // Define an info window on the map.
  infoWindow = new google.maps.InfoWindow();
}

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

var drawEdgesPoly = function() {
  // shape is the original, parent polygon

  var shape = poly;
  // set padding constant to 1 (i.e. 1m distance all around) 
  padding = 50;

  var vertices = shape.getPath();
  var polybounds = new google.maps.LatLngBounds();
  for (var i = 0; i < vertices.getLength(); i++) {
    polybounds.extend(vertices.getAt(i));
  }
  var center = polybounds.getCenter();
  if (centerMarker && centerMarker.setMap) {
    centerMarker.setMap(null);
  }
  centerMarker = new google.maps.Marker({
    position: center,
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
  if (polylines && (polylines.length > 0)) {
    for (var i = 0; i < polylines.length; i++) {
      polylines[i].setMap(null);
    }
  }
  polylines = [];
  var newPath = [];
  for (var i = 0; i < vertices.getLength(); i++) {
    polylines.push(new google.maps.Polyline({
      path: [center, vertices.getAt(i)],
      map: map,
      strokeWidth: 2,
      strokeColor: 'red'
    }));
    newPath[i] = google.maps.geometry.spherical.computeOffset(vertices.getAt(i),
      padding,
      google.maps.geometry.spherical.computeHeading(vertices.getAt(i), center));
  }
  if (inner && inner.setMap)
    inner.setMap(null);
  // render inner shape
  inner = new google.maps.Polygon({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    editable: false,
    path: newPath
  });
};

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
}

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