Question

使用谷歌地图绘图管理器用户绘制多边形。我希望在标记（绘图管理器中的标记）放置在其上时获取多边形属性（标题，路径，..）。在这里，我想知道如何获取多边形的属性（标题，路径），然后在变量中使用它。

代码：

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

如何在标记上放置多边形属性

1 个答案: