Wie registriere ich den Listener auf den Zeichnungsmanager Icons Panel in Google Map?

Question

Ich habe Google Map Drawing Manager erfolgreich verwendet. Jetzt stehe ich vor einem Problem. Im Bild werden zwei Formen Polylinie und Polygon gezeigt. Ich möchte einfach eine Warnung anzeigen, wenn auf diese Symbole geklickt wird, wenn auf ein Polygon geklickt wird, um eine Nachricht anzuzeigen, dass "Polygon angeklickt wurde", und wenn eine Linie angeklickt wird, wird eine Meldung angezeigt, dass "Polylinie angeklickt" ist. icons image is here

Answer 1

Wenn Sie wissen möchten, wenn der Zeichenmodus der DrawingManager Änderungen (Anklicken der Schaltflächen ist eine Möglichkeit, dies zu tun), fügen Sie ein Zuhörer auf die DrawingManager für die „drawingmode_changed“ event:

google.maps.event.addListener(drawingManager, "drawingmode_changed", function() { 
    console.log("drawing mode changed:"+drawingManager.getDrawingMode()); 
}) 

proof of concept fiddle

Code-Schnipsel:

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: -34.397, 
 
     lng: 150.644 
 
    }, 
 
    zoom: 8 
 
    }); 
 

 
    var drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingMode: google.maps.drawing.OverlayType.MARKER, 
 
    drawingControl: true, 
 
    drawingControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_CENTER, 
 
     drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'] 
 
    }, 
 
    markerOptions: { 
 
     icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' 
 
    }, 
 
    circleOptions: { 
 
     fillColor: '#ffff00', 
 
     fillOpacity: 1, 
 
     strokeWeight: 5, 
 
     clickable: false, 
 
     editable: true, 
 
     zIndex: 1 
 
    } 
 
    }); 
 
    google.maps.event.addListener(drawingManager, "drawingmode_changed", function() { 
 
    console.log("drawing mode changed:" + drawingManager.getDrawingMode()); 
 
    }) 
 
    drawingManager.setMap(map); 
 
}

#map { 
 
    height: 100%; 
 
} 
 

 

 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>