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 的地图对象的引用？或者，最后一行地图的价值是什么？

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

Answer 1

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

Answer 2

供参考，您可以使用此功能。$ refs [＆＃39; map＆＃39;]。

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

2 个答案: