检测是否在半径内部或外部单击多边形

Question

在此JSFiddle中，如果单击较大的多边形（沿着Tireman Ave），您将看到围绕它绘制半径。

1. 第一个问题是每次都需要更新半径 选择了一个新的多边形。我无法删除之前的内容 半径。
2. 我想确定后续多边形是否为用户 点击是里面那个半径或外面。如果他们点击了 在半径内的多边形，我想使用alert("Selected Polygon Inside Radius");（反之亦然）。

这是我需要帮助的部分：

polygons.forEach(function (polygon) {
    polygon.setMap(map);
    google.maps.event.addListener(polygon, 'click', function (event) {
        //alert("hello");
        var circle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 1,
            strokeWeight: 3,
            fillColor: '#FF0000',
            fillOpacity: 0,
            map: map,
            clickable: false,
            center: event.latLng,
            radius: 500
        });
    });
});

Answer 1

回答你问题的第1部分：引用圆圈全局。如果圆圈存在且具有setMap方法，请在使用新圆圈覆盖之前隐藏现有圆圈。

updated fiddle

代码段

var data = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "id": 1,
    "properties": {
      "Name": "",
      "description": "",
      "timestamp": "",
      "begin": "",
      "end": "",
      "altitudeMode": "clampToGround",
      "tessellate": 1,
      "extrude": -1,
      "visibility": -1
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-83.126571, 42.348706],
          [-83.126520, 42.348634],
          [-83.126516, 42.348635],
          [-83.126147, 42.348778],
          [-83.126144, 42.348780],
          [-83.126195, 42.348852],
          [-83.126199, 42.348851],
          [-83.126568, 42.348708],
          [-83.126571, 42.348706]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "id": 2,
    "properties": {
      "Name": "",
      "description": "",
      "timestamp": "",
      "begin": "",
      "end": "",
      "altitudeMode": "clampToGround",
      "tessellate": 1,
      "extrude": -1,
      "visibility": -1
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-83.132805, 42.356496],
          [-83.132753, 42.356423],
          [-83.132751, 42.356424],
          [-83.132243, 42.356624],
          [-83.132241, 42.356625],
          [-83.132294, 42.356698],
          [-83.132296, 42.356697],
          [-83.132802, 42.356497],
          [-83.132805, 42.356496]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "id": 3,
    "properties": {
      "Name": "",
      "description": "",
      "timestamp": "",
      "begin": "",
      "end": "",
      "altitudeMode": "clampToGround",
      "tessellate": 1,
      "extrude": -1,
      "visibility": -1
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-83.126776, 42.351813],
          [-83.126492, 42.351413],
          [-83.126189, 42.351525],
          [-83.126191, 42.351528],
          [-83.126376, 42.351807],
          [-83.126776, 42.351813]
        ]
      ]
    }
  }]
};

var map;
var path = [];
var polygons = [];
var circle;

function initializeMap() {
  map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 15,
    center: new google.maps.LatLng(42.35210605281608, -83.12983274459839),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  createGeoJsonPolygon(data);

}

function createGeoJsonPolygon(data) {
  var bounds = new google.maps.LatLngBounds();
  var coords = [];
  for (var i = 0, len = data.features.length; i < len; i++) {
    coords = data.features[i].geometry.coordinates[0];

    for (var j = 0; j < coords.length; j++) {
      var pt = new google.maps.LatLng(coords[j][1], coords[j][0]);
      bounds.extend(pt);
      path.push(pt);
    }
    var polygon = new google.maps.Polygon({
      path: path,
      strokeOpacity: 1,
      strokeWeight: 1,
      fillOpacity: 0.5
    });
    polygons.push(polygon);
    path = [];

  }

  polygons.forEach(function(polygon) {
    polygon.setMap(map);
    google.maps.event.addListener(polygon, 'click', function(event) {
      //alert("hello");
      if (circle && circle.setMap) {
        circle.setMap(null);
      }
      circle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillColor: '#FF0000',
        fillOpacity: 0,
        map: map,
        clickable: false,
        center: event.latLng,
        radius: 500
      });
    });
  });
}

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

html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>