반응형
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
반응형
'programing' 카테고리의 다른 글
| VueJ를 사용한 동적 입력 필드 추가 (0) | 2022.07.07 |
|---|---|
| 기본 포인터와 스택 포인터란 정확히 무엇입니까?그들은 무엇을 가리키고 있나요? (0) | 2022.07.07 |
| Java: 범용 유형에서 클래스 리터럴을 가져오려면 어떻게 해야 합니까? (0) | 2022.07.07 |
| Vuetifyjs 오류 알 수 없는 사용자 지정 요소: 구성 요소를 올바르게 등록했습니까? (0) | 2022.07.07 |
| 입력 스트림에서 효율적으로 Android 읽기 (0) | 2022.07.07 |

