<template>
<v-card flat>
<v-toolbar dark color="primary" >
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title class="white--text">모니터링</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field :value="train" placeholder="999" clearable> </v-text-field>
<v-btn flat @click="to_current" >현재</v-btn>
</v-toolbar>
<naver-maps :width="map_width" :height="map_height" :mapOptions="mapOptions" @load="onMapLoad" >
<div v-for="mark in marker_coords" :key="mark.index">
<naver-marker :lat="mark.lat" :lng="mark.lng" @click="onMarkerClicked(mark.index)" @load="onMarkerLoad"/>
<naver-info-window :isOpen="isOpen" :marker="marker" @load="onInfoLoad" >
<h3>{{ info_msg }}</h3>
</naver-info-window>
</div>
</naver-maps>
</v-card>
</template>
<script>
export default {
name: 'NaverMap',
data() {
return {
map: null,
train: "999",
isOpen: false,
infos: [
{msg: "07:05:22"},
{msg: "07:55:15"}
],
info_msg: "",
marker: null,
marker_list: [],
marker_coords: [
{index: 0, lat: 36.331997, lng: 127.435926},
{index: 1, lat: 35.878825, lng: 128.628072}
],
map_width: 600,
map_height: 400,
mapOptions: {
zoom: 3,
lat: 36.331997,
lng: 127.435926,
zoomControl: false,
zoomControlOptions: {
position: 1
}
}
}
},
created() {
window.addEventListener('resize', this.handelResize);
this.handelResize();
},
destroyed() {
window.removeEventListener('resize', this.handelResize);
},
methods: {
onMapLoad(map) {
this.map = map;
},
onMarkerLoad(vue) {
this.marker = vue.marker;
this.marker_list.push(this.marker);
},
onInfoLoad(that) {
},
onMarkerClicked(index) {
this.marker = this.marker_list[index];
this.info_msg = this.infos[index].msg;
this.isOpen = !this.isOpen;
},
handelResize() {
this.map_width = window.innerWidth;
this.map_height = window.innerHeight;
},
to_current() {
// 하나 추가
this.marker_coords.push({index: 2, lat: 35.873452, lng: 128.658072});
console.log("marker_coords count -> " + this.marker_coords.length);
}
}
}
</script>
현재 버튼을 클릭하면 마커를 하나 더 추가하고 싶습니다.
또는 현재 마커를 전부 삭제하고 새로 생성하고 싶어요.
위코드를 작성했는데 마커가 생기지 않고 있습니다.
v-for 의 :key 값이 변경되면 그 하위 마커와 인포윈도우는 자동으로 변경되는줄 알았는데 그러지 않네요
도와주세요.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
