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

Question

这是我的 VueJs 组件：

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

例如，如何在此处获取对当前地图对象的引用，以便将其与google.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 对象的引用？ 或者，最后一行中map的值是多少？

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

Answer 1

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

Answer 2

作为参考，您可以使用this.$refs['map']。