vue-google-map 将信息窗口设置在标记上方

Question

所以我让我的信息窗口和标记工作，但我不知道如何使它像示例一样出现在标记上方：https : //developers.google.com/maps/documentation/javascript/examples/信息窗口-简单

我的样子是这样的：

这是因为它使用的是位置，而不是Marker对象。我将如何获取此对象并将其传递给 InfoWindow？代码如下。

html文件

<div>
    test
    <gmap-map
        :center="center"
        :zoom="7"
        style="width: 100%; height: 300px"
    >
        <gmap-marker
            :key="index"
            v-for="(m, index) in markers"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            :label="m.label"
            @click="openWindow"

        />
        <gmap-info-window 
            @closeclick="window_open=false" 
            :opened="window_open" 
            :position="infowindow"
        >
            Hello world!
        </gmap-info-window>    
    </gmap-map> 

    <table>
        <thead>
            <tr></tr>
        </thead>
        <tbody>
            <tr></tr>
        </tbody>
    </table>
</div>

vue 文件

export default {
    data () {
        return {
            center: {lat: 10.0, lng: 10.0},
            markers: [
                {
                    label: "A",
                    position: {lat: 10.0, lng: 10.0}
                }, 
                {
                    label: "B",
                    position: {lat: 11.0, lng: 11.0}
                }
            ],
            info_marker: null,
            infowindow: {lat: 10, lng: 10.0},
            window_open: false
        }
    },
    methods: {
        openWindow () {
            this.window_open = true
        }
    }        
}

Answer 1

你可以设置pixelOffset到信息窗口来解决这个问题。

    <gmap-info-window 
        @closeclick="window_open=false" 
        :opened="window_open" 
        :position="infowindow"
        :options="{
          pixelOffset: {
            width: 0,
            height: -35
          }
        }"
    >

演示https://codesandbox.io/s/jj972nj273