檢測多邊形是否在半徑內或半徑外單擊

在此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

檢測多邊形是否在半徑內或半徑外單擊

回答

相關問題