VueJsコンポーネント内のGoogleマップオブジェクトへの参照を取得するにはどうすればよいですか？

Question

これは私のVueJsコンポーネントです：

<template> 
    <div> 
    <gmap-map ref="map" :center="center" @click="captureClickedLocation" :zoom="10"> 
    </gmap-map> 
    </div> 
</template> 

例えば、カスタムオーバーレイを表示するには、google.maps.drawing.DrawingManagerでそれを使用するために、ここでは現在マップオブジェクトへの参照を取得する方法は？

サンプルコードは、どのようにGMAPマップのマップオブジェクトへの参照を取得するには、この

var drawingManager = new google.maps.drawing.DrawingManager({ 
         drawingMode: google.maps.drawing.OverlayType.MARKER, 
         drawingControl: true, 
         drawingControlOptions: { 
          position: google.maps.ControlPosition.TOP_CENTER, 
          drawingModes: [ 
           google.maps.drawing.OverlayType.CIRCLE, 
           google.maps.drawing.OverlayType.POLYGON, 
           google.maps.drawing.OverlayType.RECTANGLE 
          ] 
         }, 
         markerOptions: { 
          icon: 'images/beachflag.png' 
         }); 
drawingManager.setMap(map); 

ようかなったでしょうか？または、最終行のマップの値は何ですか？

PS：私は、GoogleマップのためVUEのラッパーである、https://github.com/xkjyeah/vue-google-mapsからVUE-グーグルマップを使用しています。

Answer 1

this.$refs.map.$mapObjectまたはthis.$refs['map'].$mapObject

Answer 2

参考にしてください。$ refs ['map']。あなたがこれを使用することができます参考