0
Ich möchte ein Polygon zeichnen und prüfen, ob es einen Marker enthält.Google map Prüfen, ob Polygon Marker enthält
Ich habe diesen GitHub-Code https://github.com/tparkin/Google-Maps-Point-in-Polygon verwendet, um der Polygonklasse eine neue Methode hinzuzufügen. Der Code unten funktioniert, aber zeigt immer "NEIN" in der Konsole, auch wenn ich ein Polygon um den Stift zeichne, irgendwelche Hilfe warum?
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(e) {
var point = new google.maps.LatLng(33.619003, -83.867405);
var polygon = new google.maps.Polygon(getPolygonCoords());
if (polygon.Contains(point)) {
console.log('YES');
} else {
console.log('NO');
}
});
Dank
Voll Code:
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="UTF-8" />
<title>Google Map</title>
<style>
#map,
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing"></script>
<script type="text/javascript">
var drawingManager;
var selectedShape;
var all_overlays = [];
function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
}
function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}
function getPolygonCoords() {
var coordinates = new Array();
if (!selectedShape) {
return false;
} else {
var len = selectedShape.getPath().getLength();
for (var i = 0; i < len; i++) {
coordinates.push(selectedShape.getPath().getAt(i).toUrlValue(5));
}
return coordinates;
}
}
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(33.619003, -83.867405),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
var polyOptions = {
fillColor: '#0099FF',
fillOpacity: 0.7,
strokeColor: '#AA2143',
strokeWeight: 2,
editable: true
};
// Creates a drawing manager attached to the map that allows the user to draw Polygons
drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
},
polygonOptions: polyOptions,
map: map
});
google.maps.Polygon.prototype.Contains = function(point) {
var crossings = 0,
path = this.getPath();
// for each edge
for (var i = 0; i < path.getLength(); i++) {
var a = path.getAt(i),
j = i + 1;
if (j >= path.getLength()) {
j = 0;
}
var b = path.getAt(j);
if (rayCrossesSegment(point, a, b)) {
crossings++;
}
}
// odd number of crossings?
return (crossings % 2 == 1);
function rayCrossesSegment(point, a, b) {
var px = point.lng(),
py = point.lat(),
ax = a.lng(),
ay = a.lat(),
bx = b.lng(),
by = b.lat();
if (ay > by) {
ax = b.lng();
ay = b.lat();
bx = a.lng();
by = a.lat();
}
// alter longitude to cater for 180 degree crossings
if (px < 0) {
px += 360;
}
if (ax < 0) {
ax += 360;
}
if (bx < 0) {
bx += 360;
}
if (py == ay || py == by) py += 0.00000001;
if ((py > by || py < ay) || (px > Math.max(ax, bx))) return false;
if (px < Math.min(ax, bx)) return true;
var red = (ax != bx) ? ((by - ay)/(bx - ax)) : Infinity;
var blue = (ax != px) ? ((py - ay)/(px - ax)) : Infinity;
return (blue >= red);
}
};
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(e) {
var point = new google.maps.LatLng(33.619003, -83.867405);
var polygon = new google.maps.Polygon(getPolygonCoords());
if (polygon.Contains(point)) {
console.log('YES');
} else {
console.log('NO');
}
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
all_overlays.push(e);
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
// Clear the current selection when the drawing mode is changed, or when the map is clicked.
google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
google.maps.event.addListener(map, 'click', clearSelection);
var marker = new google.maps.Marker({
position: {
lat: 33.619003,
lng: -83.867405
},
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>
Ihre 'Contains' Funktion zu tragen scheint keine Beziehung zu der 'containsLatLng'-Funktion, die du benutzt hast. Warum nicht einfach die Funktion 'containsLocation' verwenden, die in der Geometry-Bibliothek von Google Maps integriert ist? – duncan
Ich habe es in diese geändert var isWithinPolygon = polygon.containsLatLng (point); console.log (isWithinPolygon); aber es zeigte einen Fehler in der Konsole: TypeError: polygon.containsLatLng ist keine Funktion –
das funktioniert auch nicht: var point = new google.maps.LatLng (33.619003, -83.867405); var isWithinPolygon = google.maps.geometry.poly.containsLocation (point, getPolygonCoords()); console.log (isWithinPolygon); gibt einen Fehler –