Google지도에서 드로잉 관리자 아이콘 패널에 클릭 수신기를 등록하는 방법은 무엇입니까?

Question

Google지도 그림 관리자를 성공적으로 사용했습니다. 이제 나는 한 가지 문제에 직면 해있다. 이미지에는 폴리선과 폴리곤의 두 가지 모양이 표시됩니다. 이 아이콘을 클릭하면 다각형을 클릭하면 경고 메시지를 표시하고 'polygon is clicked'메시지를 표시하고 선을 클릭하면 'polyline is clicked'메시지가 표시됩니다.

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

: 당신이 DrawingManager 변화의 그리기 모드 (버튼을 클릭하면 것을 수행하는 하나의 방법입니다) 때, 알고 "drawingmode_changed"이벤트에 대한 DrawingManager에 리스너를 추가하려면 icons image is here

Answer 1

proof of concept fiddle

코드 :

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>