Javascript 如何使用谷歌地图检测一个点在多边形内？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3036408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect that a point is inside a Polygon using Google Maps?
提问by Natim
I would like to detect that a google.maps.LatLngis inside a google.maps.Polygon.
我想检测 agoogle.maps.LatLng在 a 内google.maps.Polygon。
How can I do that ?
我怎样才能做到这一点 ？
Cheers,
干杯，
采纳答案by Andrei I
Other solution: Google-Maps-Point-in-Polygon
其他解决方案：Google-Maps-Point-in-Polygon
A Javascript Google Maps v3 extension for the Polygon class to detect whether or not a point resides within it...
用于 Polygon 类的 Javascript Google Maps v3 扩展，用于检测点是否位于其中...
回答by swapnil udare
You can use this in google map V3:-
您可以在谷歌地图 V3 中使用它：-
google.maps.geometry.poly.containsLocation(google.maps.LatLng(latitude, longitude),polygons);
polygons is a object returned by function after polygoncomplete.
多边形是在polygoncomplete之后由函数返回的对象。
var polygons=null;
google.maps.event.addDomListener(drawingManager, "polygoncomplete", function(polygon) {
polygons=polygon;
});
reference by https://developers.google.com/maps/documentation/javascript/reference
参考https://developers.google.com/maps/documentation/javascript/reference
回答by Paul Gibbs
Google provides their own implementation within the geometry library, which I haven't checked, but presumably covers the edge cases discussed in the other answers.
谷歌在几何库中提供了他们自己的实现，我没有检查过，但大概涵盖了其他答案中讨论的边缘情况。
See the containsLocation method described here. Note that you will have to import the geometry library explicitly, as it is not in the base map API
请参阅此处描述的 containsLocation 方法。请注意，您必须明确导入几何库，因为它不在基本地图 API 中
回答by Natim
I used this algorithm to detect that the point is inside the polygon : http://alienryderflex.com/polygon/
我用这个算法来检测点在多边形内：http: //alienryderflex.com/polygon/
I added a new method containsto the Polygon :
我向containsPolygon添加了一个新方法：
// Add a function contains(point) to the Google Maps API v.3
google.maps.Polygon.prototype.contains = function(point) {
var j=0;
var oddNodes = false;
var x = point.lng();
var y = point.lat();
var paths = this.getPath();
for (var i=0; i < paths.getLength(); i++) {
j++;
if (j == paths.getLength()) {j = 0;}
if (((paths.getAt(i).lat() < y) && (paths.getAt(j).lat() >= y))
|| ((paths.getAt(j).lat() < y) && (paths.getAt(i).lat() >= y))) {
if ( paths.getAt(i).lng() + (y - paths.getAt(i).lat())
/ (paths.getAt(j).lat()-paths.getAt(i).lat())
* (paths.getAt(j).lng() - paths.getAt(i).lng())<x ) {
oddNodes = !oddNodes
}
}
}
return oddNodes;
}
google.maps.Polyline.prototype.contains = google.maps.Polygon.prototype.contains;
回答by deAtog
Every method described here fails in one way or another.
此处描述的每种方法都以某种方式失败。
The methods given by Andrei I and Natim do notconsider polygons with geodesic edges. These methods also fail to realize that a non-geodesic edge in Google Maps is only straight within the Mercator projection. These methods assume the vertices lie on a equal distance lat/lon grid where one degree latitude equals one degree of longitude. As a result of this error, these methods will indicate a point is outside the polygon, while being displayed inside for some cases. This is easily observed for long non-vertical/non-horizontal edges. To resolve this issue, all points must first be converted from Latitude, Longitude to X, Y coordinates in the Mercator projection. Here is the method to convert the coordinates from lat/lon to x/y in Mercator.(Lacks accuracy) Rhumb line navigation can be used as a basis for an alternative method.Google Maps experimental version 3.10 implements this method.
Andrei I 和 Natim 给出的方法不考虑具有测地线边缘的多边形。这些方法也没有意识到谷歌地图中的非测地线边缘仅在墨卡托投影内是直线。这些方法假设顶点位于等距纬度/经度网格上，其中一度纬度等于一度经度。由于此错误，这些方法将指示点在多边形外部，而在某些情况下显示在多边形内部。这对于长的非垂直/非水平边缘很容易观察到。要解决此问题，必须首先将所有点从纬度、经度转换为墨卡托投影中的 X、Y 坐标。这是在墨卡托中将坐标从 lat/lon 转换为 x/y 的方法。（缺乏准确性）可以使用恒向线导航作为替代方法的基础。Google Maps 3.10 实验版实现了这个方法。
The method mentioned by Paul Gibbs, swapnil udare, and Adi Lester doesconsider geodesic edges, but as of Google Maps v3.9 it uses the same method mentioned above for non-geodesic polygons. As such it also suffers from the same issue described above.
Paul Gibbs、swapnil udare 和 Adi Lester 提到的方法确实考虑了测地线边缘，但从 Google Maps v3.9 开始，它使用与上面提到的非测地线多边形相同的方法。因此，它也存在上述相同的问题。
Update- The issue with Google Maps has been corrected in the current experimental version of Google Maps v3.10.
更新- 谷歌地图的问题已在谷歌地图 v3.10 的当前实验版本中得到纠正。
回答by love kumar
No need for complex algorithms, I was able to achieve this using isPointInPath() method of html canvas.
不需要复杂的算法，我能够使用 html canvas 的 isPointInPath() 方法来实现这一点。
http://www.w3schools.com/tags/canvas_ispointinpath.asp
http://www.w3schools.com/tags/canvas_ispointinpath.asp
Create a canvas element. Draw a polygon with multiple endpoints using moveTo(),lineTo() methods. Verify if a point(x,y) lies inside the polygon using isPointInPath() method.
创建画布元素。使用 moveTo(),lineTo() 方法绘制具有多个端点的多边形。使用 isPointInPath() 方法验证点 (x,y) 是否位于多边形内。
<canvas id="canvas"></canvas>
//x,y are coordinate of the point that needs to be tested
//coordinates contains all endpoint of a polygon in format of x1,y1,x2,y2,x3,y3....
function isPointInPolygon(x, y, coordinates) {
var ctx = canvas.getContext("2d");
var coords = coordinates.split(',');
if (coords != null && coords.length > 4) {
ctx.beginPath();
ctx.moveTo(coords[0], coords[1]);
for (j = 2; j < coords.length; j++) {
ctx.lineTo(coords[j], coords[j + 1]);
j++;
}
ctx.closePath();
if (ctx.isPointInPath(x, y))
return true;
else
return false;
}
return false;
}
