0
我想畫一個多邊形並檢查它是否包含標記。谷歌地圖檢查多邊形是否包含標記
我用這個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>
你'Contains'功能似乎承受與您所說的「containsLatLng」函數沒有任何關係。爲什麼不使用內置於Google Maps幾何庫中的'containsLocation'函數？ – duncan
我把它改成了這個var isWithinPolygon = polygon.containsLatLng（point）;的console.log（isWithinPolygon）;但它在控制檯中顯示錯誤：TypeError：polygon.containsLatLng不是函數 –
這也不起作用：var point = new google.maps.LatLng（33.619003，-83.867405）; var isWithinPolygon = google.maps.geometry.poly.containsLocation（point，getPolygonCoords（））; console.log（isWithinPolygon）;給出錯誤 –