如何在 VueJs 组件中获取对谷歌地图对象的引用？

Question

这是我的 VueJs 组件：

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

例如，如何在此处获取对当前地图对象的引用，以便将其与 agoogle.maps.drawing.DrawingManager一起使用以显示自定义叠加层？

示例代码是这样的

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

如何获取对gmap-map的地图对象的引用？或者，最后一行中map的值是多少？

PS：我使用VUE，谷歌地图从https://github.com/xkjyeah/vue-google-maps，这是谷歌地图VUE包装。

Answer 1

this.$refs.map.$mapObject 或者 this.$refs['map'].$mapObject