잡히지 않은 TypeError : 정의되지 않은 'setDrawingMode'메서드를 호출 할 수 없습니다.

Question

Google지도 드로잉 관리자를 사용하여 컨트롤 클래스를 작성하고 있습니다. 하지만이 줄에서 자바 스크립트 오류가 발생했습니다.

// Switch back to non-drawing mode after drawing a shape. 
this.drawingManager.setDrawingMode(null); 

Uncaught TypeError: Cannot call method 'setDrawingMode' of undefined

어떤 하나의 방법이 오류를 제거하려면 나를 도와 드릴까요? 대단히 감사합니다!

function DrawingManagerCtrl() { 
    this.drawingManager = new google.maps.drawing.DrawingManager({ 
     // drawingMode: google.maps.drawing.OverlayType.MARKER, 
     drawingControlOptions : { 
      position : google.maps.ControlPosition.TOP_CENTER, 
      drawingModes : [ google.maps.drawing.OverlayType.RECTANGLE ] 
     }, 
    }); 

    google.maps.event.addListener(this.drawingManager, 'overlaycomplete', function(e) { 
     // Switch back to non-drawing mode after drawing a shape. 
     this.drawingManager.setDrawingMode(null); 
    }); 
}; 

DrawingManagerCtrl.prototype = { 
    drawingManager : null, 
}; 

Answer 1

나는 특정 API를 모르겠지만, 이벤트 핸들러 함수 내에서 this가 외부 this 같은 아니라고 생각, 그래서 당신은 당신이 클로저를 만들고있는 사실을 사용해야합니다 :

function DrawingManagerCtrl() { 
    var self = this; // <==== Create a variable for the closure to close over 
    this.drawingManager = new google.maps.drawing.DrawingManager({ 
     // drawingMode: google.maps.drawing.OverlayType.MARKER, 
     drawingControlOptions : { 
      position : google.maps.ControlPosition.TOP_CENTER, 
      drawingModes : [ google.maps.drawing.OverlayType.RECTANGLE ] 
     }, 
    }); 

    google.maps.event.addListener(this.drawingManager, 'overlaycomplete', function(e) { 
     // Switch back to non-drawing mode after drawing a shape. 
     self.drawingManager.setDrawingMode(null); 
     //^Use it 
    }); 
}; 

this

은, 자바 스크립트, 함수가 호출되는 방식에 의해 결정된다,하지 함수가 어디에 정의된다. 따라서 Google지도에서 이벤트 콜백에서 this에 사용해야 할 것을 지정하게하지 않으면 this은 개체를 참조하지 않습니다. 클로저를 사용하면 변수 (위의 self)를 대신 사용할 수 있습니다. (내 빈혈 작은 블로그)

추가 읽기는 :

• Closures are not complicated
• Mythical methods
• You must remember this

Answer 2

당신은 구글 맵 API의 라이브러리를 연결에서 실수를했을 수도 있습니다.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places,geometry,drawing"></script>