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

问题

Using google map Drawing Manager user draws the polygon .I want to get polygon properties(title,paths,..) when a marker(marker from drawing manager) is placed on it. Here I want to know how to get the properties of the polygon(title, paths) and then like to it in a variable.

code :

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

It would be fine to show a alert message of the polygon properties When I place the marker on it. Hope There will be possible for this.

jsfiddle

回答1:

You would need to declare an array holding every polygon that the user draws and then, when the user adds a marker, you would need to iterate over your polygonarray until you find one that contains the marker. This is done by adding listeners to Drawingmanager's polygoncomplete and markercomplete events.

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

Edit: I was missing a closing parenthesis after containsLocation

See it working at: http://jsfiddle.net/amenadiel/zfvyou0b/

来源：https://stackoverflow.com/questions/28140181/how-to-get-polygon-properties-when-a-marker-is-placed-on-it

标签

javascript

google-maps

google-maps-api-3

gmaps.js