如何在放置标记时获取多边形属性

Question

使用 google 地图绘图管理器用户绘制多边形。我想在放置标记（来自绘图管理器的标记）时获取多边形属性（标题、路径等）。在这里我想知道如何获取多边形的属性（标题，路径），然后在变量中喜欢它。

代码：

 <html>
 <head>
   <title>Get Latitude and Longitude Coordinates of a Polygon - Google Maps API v3</title>
   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.17&libraries=drawing&sensor=true"></script>
  <script type="text/javascript" src="gmaps.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function() {
    var mapHeight = '400px';
    $('#map-canvas').css('height', mapHeight);
    mymap = new GMaps({
        div: '#map-canvas',
        lat: 47.53187912201915,
        lng: 7.705222390807307,
        zoom: 20,
        zoomControl: true,
        mapTypeId: 'satellite'
    });
       map = mymap.map;
map_drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: null,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_LEFT,
                drawingModes: [
                    google.maps.drawing.OverlayType.MARKER,
                    google.maps.drawing.OverlayType.POLYGON
                ]
            },
            //drawingMode: google.maps.drawing.OverlayType.POLYGON,
            markerOptions: {
                draggable: true,
            },

            polylineOptions: {
                editable: true
            },
            map: map
         });

      });  

</script>
</head>
<body>
  <div id="map-canvas" style="height: 350px; width: auto;">
</div>
<div id="info" style="position: absolute; font-family: Arial; font-size: 14px;">
</div>
</body>
</html>

当我在其上放置标记时显示多边形属性的警告消息会很好。希望有这个可能。

jsfiddle

Answer 1

您需要声明一个数组来保存用户绘制的每个多边形，然后，当用户添加标记时，您需要遍历多边形数组，直到找到一个包含该标记的多边形数组。这是通过向 Drawingmanager 的 polygoncomplete 和 markercomplete 事件添加监听器来完成的。

var polygonArray=[];

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
    polygonArray.push(polygon);
});

google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
    polygonArray.forEach(function(polygon) {
        if(google.maps.geometry.poly.containsLocation(marker.getPosition(), polygon)) {
            console.log('Marker added inside polygon',polygon);
        }
    });
});

编辑：我在 containsLocation 之后缺少右括号

查看它的工作方式：http://jsfiddle.net/amenadiel/zfvyou0b/

如何在放置标记时获取多边形属性

How to get polygon properties when a marker is placed on it

javascript

google-maps

google-maps-api-3

gmaps.js