programing

vue-google-map set infow는 마커 위에 있습니다.

prostudy 2022. 7. 7. 22:26
반응형

vue-google-map set infow는 마커 위에 있습니다.

그래서 인포윈도와 마커는 동작하고 있습니다만, 어떻게 하면 마커 위에 표시되는지 알 수 없습니다.https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

여기에 이미지 설명 입력

제 모습은 이렇습니다.

여기에 이미지 설명 입력

그 이유는 이 장치가 위치를 사용하고 있기 때문입니다.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
        }
    }        
}

설정할 수 있습니다.pixelOffset이 문제를 해결하려면 [Info]창으로 이동합니다.

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

데모 https://codesandbox.io/s/jj972nj273

언급URL : https://stackoverflow.com/questions/49811473/vue-google-map-set-infowindow-to-be-above-a-marker

반응형