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

在此JSFiddle中，如果单击较大的多边形（沿着Tireman Ave），则会看到半径被绘制在其周围。检测多边形是否在半径内或半径外单击

第一个问题是半径需要每次更新一个新的多边形被选中。我无法删除以前的半径。
欲然后确定随后的多边形用户点击是否是内部该半径或外。如果他们点击半径内的多边形，我想使用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 
     }); 
    }); 
});

来源

2015-09-09 mapr

如果什么多边形的部分是半径，部分内正外？ – geocodezip

请问每个问题有一个问题。 – geocodezip

如果您单击另一个多边形，则会移动该圆。我不确定你在＃2中的含义（“我想确定用户点击的后续多边形是否为”），当他们这样做圆圈移动时，点击的多边形总是在圆圈内。 – geocodezip

回答你的问题的一部分＃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>

来源

2015-09-09 04:47:38 geocodezip

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

回答

相关问题