Google地图检查多边形是否包含标记

Question

我想画一个多边形并检查它是否包含一个标记。

我使用这个github代码https://github.com/tparkin/Google-Maps-Point-in-Polygon向多边形类添加一个新方法。下面的代码是有效的，但即使我在引脚周围绘制一个多边形，控制台总是显示“NO”，为什么有任何帮助？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" title="&nbsp;" />

由于

完整代码：

    

    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');
    }
});

Answer 1

问题是：

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
            });
        }

传递给Polygon构造函数的参数不是有效的hexdocs，因此您创建一个没有路径的空多边形。

无需创建多边形，已存在多边形（通过DrawingManager创建）...只需使用它：

＆＃13;

＆＃13;

#map,
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

＆＃13;

<div id="map">
    </div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=drawing&callback=initialize" async defer></script>

＆＃13;

button

＆＃13;

＆＃13;

＆＃13;