如何知道标记是否在多边形内部?

时间:2014-09-10 04:14:36

标签: javascript

我已经创建了一个多边形和可拖动标记,但我的问题是如果标记位于多边形内部,它将发出警告"否"它应该是"是"?我的代码在这里:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,geometry"></script>
    <script type="text/javascript">
        function initialize() {
            var coor = [];
            var mapOptions = {
              center: new google.maps.LatLng(7.0704771, 125.608522),
              zoom: 17,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);

            var dragable_marker = new google.maps.Marker({
              position : new google.maps.LatLng(7.0704771, 125.608522),
              map : map,
              draggable : true,
              title: "Your customer location"
            });

            drawingManager = new google.maps.drawing.DrawingManager({
                drawingMode: google.maps.drawing.OverlayType.NONE,
                drawingControl: true,
                drawingControlOptions: {
                  position: google.maps.ControlPosition.TOP_CENTER,
                  drawingModes: [
                    //google.maps.drawing.OverlayType.MARKER,
                    google.maps.drawing.OverlayType.POLYGON
                  ]
                },
                markerOptions: {
                  icon: 'img/pin.png'
                },
                polygonOptions: {
                  fillColor: '#66d9ef',
                  fillOpacity: 0.5,
                  strokeColor: '#1A8BD6',
                  strokeWeight: 2,
                  clickable: true,
                  editable: false,
                  draggable: false,
                  zIndex: 1
                }
            });
            drawingManager.setMap(map);

            var created_poly = new google.maps.Polygon({path:coor,
                        map: map, 
                        strokeColor:"#0000FF",
                        strokeOpacity:0.8,
                        strokeWeight:2,
                        fillColor:"#0000FF",
                        fillOpacity:0.4
                    });

            google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
              drawingManager.setDrawingMode(null);
              var arr=[];
              polygon.getPath().forEach(
                function(latLng){
                  arr.push(latLng.toString());
                }
              )
              coor = arr.join(',\n');
              drawingManager.setOptions({
                drawingControl: false,
              });
            });

            google.maps.event.addListener(dragable_marker,"dragend", function() {
              if(google.maps.geometry.poly.containsLocation(dragable_marker.getPosition(), created_poly) == true) {
               alert("yes"); // if marker is inside in polygon
              } else { 
                alert("no"); // if marker is outside in polygon
              }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
        #map-canvas{
            height: 300px;
        }
    </style>

<body>
    <div id="map-canvas"></div>
</body

我的错误是什么?

1 个答案:

答案 0 :(得分:0)

解决此问题的一种算法是多边形点。请参阅解释http://en.wikipedia.org/wiki/Point_in_polygon

您可以在此处找到为Google Maps JS API V3实现此功能的代码:https://github.com/tparkin/Google-Maps-Point-in-Polygon