检测多边形是否在半径内或半径外被点击

Detect Whether Polygon is Clicked Inside or Outside the Radius

本文关键字：多边形 检测 是否      更新时间：2023-09-26

在这个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
        });
    });
});

回答你的问题的第一部分:使引用圆形全局。如果圆圈存在并且有setMap方法，在用新圆圈覆盖它之前隐藏现有圆圈。

更新小提琴

代码片段: 

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>

相关文章：