我想画一个多边形并检查它是否包含标记。
我使用此 github 代码 https://github.com/tparkin/Google-Maps-Point-in-Polygon 向多边形类添加了一个新方法。下面的代码有效，但即使我在引脚周围绘制多边形，也始终在控制台中显示"NO"，有什么帮助吗？
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');
}
});
谢谢
完整代码：
<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>
问题是：
var polygon = new google.maps.Polygon(getPolygonCoords());
传递给多边形构造函数的参数不是有效的 PolygonOptions -对象，因此创建一个没有路径的空多边形。
无需创建多边形，已经存在一个多边形（通过绘图管理器创建）...只需使用它：
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({
drawingMode:google.maps.drawing.OverlayType.POLYGON,
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(polygon) {
if (polygon.Contains(marker.getPosition())) {
alert('YES');
} else {
alert('NO');
}
});
var marker = new google.maps.Marker({
position: {
lat: 33.619003,
lng: -83.867405
},
map: map
});
}#map,
html,
body {
padding: 0;
margin: 0;
height: 100%;
}<div id="map">
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=drawing&callback=initialize" async defer></script>