javascript - vue-google-map set infowindow to be above a marker - Stack Overflow

admin管理员组

文章数量:1277903

So I've got my infowindow and marker working, but I don't know how to make it so that it appears above the marker like the example:

what mine looks like is this:

This is because it's using a position, rather than the Marker object. How would I get this object and pass it to the InfoWindow? Code below.

html file

<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 file

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
        }
    }        
}

So I've got my infowindow and marker working, but I don't know how to make it so that it appears above the marker like the example: https://developers.google./maps/documentation/javascript/examples/infowindow-simple

what mine looks like is this:

This is because it's using a position, rather than the Marker object. How would I get this object and pass it to the InfoWindow? Code below.

html file

<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 file

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
        }
    }        
}

• javascript
• google-maps
• vue.js
• vuejs2

Share Improve this question Follow asked Apr 13, 2018 at 7:22 A. LA. L 12.7k2929 gold badges9898 silver badges178178 bronze badges 1

• Maybe change infowindow: {lat: 10, lng: 10.0} to infowindow: {lat: 0, lng: 0} ? – Belmin Bedak Commented Apr 13, 2018 at 8:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

you can set pixelOffset to the info window to fix this.

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

demo https://codesandbox.io/s/jj972nj273

本文标签： javascriptvuegooglemap set infowindow to be above a markerStack Overflow