google-maps-api-3 - google.maps.Circle 类中的 getPath 函数

Question

google.maps.Circle 类中没有任何 getPath() 函数。如何使用 getRadius() 和 getCenter() 函数获得近似路径？

Answer 1

您可以使用 google.maps.geometry.spherical.computeOffset计算具有相同半径和中心的圆形多边形路径的方法(需要 geometry 库)。

function circlePath(circle) {
  var numPts = 512;
  var path = [];
  for (var i = 0; i < numPts; i++) {
    path.push(google.maps.geometry.spherical.computeOffset(circle.getCenter(), circle.getRadius(), i * 360 / numPts));
  }
  return path;
}

代码片段:

var geocoder;
var map;

function circlePath(circle) {
  var numPts = 512;
  var path = [];
  for (var i = 0; i < numPts; i++) {
    path.push(google.maps.geometry.spherical.computeOffset(circle.getCenter(), circle.getRadius(), i * 360 / numPts));
  }
  return path;
}

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var circle = new google.maps.Circle({
    map: map,
    radius: 1000,
    center: map.getCenter(),
    fillOpacity: 0.2
  });
  var polygon = new google.maps.Polygon({
    map: map,
    paths: [circlePath(circle)],
    fillColor: 'red',
    fillOpacity: 0.5,
    strokeColor: 'red'
  });
  google.maps.event.addDomListener(document.getElementById('circle'), 'click', function() {
    circle.setMap(circle.getMap() == null ? map : null);
  });
  google.maps.event.addDomListener(document.getElementById('polygon'), 'click', function() {
    polygon.setMap(polygon.getMap() == null ? map : null);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" id="circle" value="toggle circle" />
<input type="button" id="polygon" value="toggle polygon" />

<div id="map_canvas"></div>