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

Question

I would like to draw a polygon and check if it contains a marker.我想绘制一个多边形并检查它是否包含标记。

I used this github code https://github.com/tparkin/Google-Maps-Point-in-Polygon to add a new method to the polygon class.我使用这个 github 代码https://github.com/tparkin/Google-Maps-Point-in-Polygon向多边形类添加了一个新方法。 The code below is working but always shows "NO" in console even when I draw a polygon around the pin, any help why ?下面的代码正在工作，但即使我在引脚周围绘制多边形，控制台中也始终显示“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');
    }
});

Thanks谢谢

Full 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>

Answer 1

The issue is :问题是：

var polygon = new google.maps.Polygon(getPolygonCoords());

the argument passed to the Polygon-constructor is not a valid PolygonOptions -object , so you create an empty polygon, without a path.传递给 Polygon-constructor 的参数不是有效的PolygonOptions -object ，因此您创建了一个没有路径的空多边形。

There is no need to create a polygon, there already existsa polygon(created via the DrawingManager)...just use it:不需要创建多边形，已经存在一个多边形（通过 DrawingManager 创建）...只需使用它：

 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>

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

问题描述

1 个解决方案

解决方案1
4 已采纳 2016-05-30 23:34:36

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2016-05-30 23:34:36

解决方案1
4 已采纳 2016-05-30 23:34:36