Vue + Springboot
SpringBoot+Vue.js - 관광지 상세정보 페이지
BSYeop
2022. 2. 16. 17:04
관광지 상세 정보를 보여주는 페이지 추가
DetailCulture.vue (template)
<template>
<v-container
fluid
>
<v-card class="pa-3">
<v-row
dense
>
<v-col>
{{ tours.contentid }}
<v-card>
<v-carousel
:cycle="true"
:interval="5000"
>
<v-carousel-item
v-for="(image,i) in images"
:key="i"
:src="image.originimgurl"
reverse-transition="fade-transition"
transition="fade-transition"
/>
</v-carousel>
<v-card-title class="text-h4 justify-center">
{{ tours.title }}
</v-card-title>
<hr>
<v-card-text class="text-h6">
<p>주소 : {{ tours.addr1 }}</p>
<p>문의 및 안내 : {{ detailIntro.infocenterculture }}</p>
<p v-if="detailIntro.scale != '' ">
규모 : {{ detailIntro.scale }}
</p>
<p v-if="detailIntro.usetimeculture != '' ">
이용시간 : {{ detailIntro.usetimeculture }}
</p>
<p v-if="detailIntro.restdateculture!= null">
쉬는날 : {{ detailIntro.restdateculture }}
</p>
<p v-if="detailIntro.usefee!= null">
이용요금 : {{ detailIntro.usefee }}
</p>
<p v-if="detailIntro.discountinfo!= null">
할인정보 : {{ detailIntro.discountinfo }}
</p>
<p v-if="detailIntro.dparkingculture!= null">
주차시설 : {{ detailIntro.parkingculture }}
</p>
<p v-if="detailIntro.parkingfee!= ''">
주차요금 : {{ detailIntro.parkingfee }}
</p>
<p v-if="detailIntro.chkpetculture!= null">
애완동물동반 : {{ detailIntro.chkpetculture }}
</p>
</v-card-text>
<hr>
<v-card-title class="text-h4">
상세 정보
</v-card-title>
<v-card-text class="text-h6">
{{ tours.overview }}
</v-card-text>
<hr>
<v-card-title class="text-h4">
위치정보
</v-card-title>
<div
id="kmap"
ref="map"
style="width:100%; height:400px"
/>
</v-card>
</v-col>
</v-row>
<v-row dense>
<v-col />
</v-row>
</v-card>
</v-container>
</template>v-carousel
:cycle = true로 설정하면 사진이 일정시간 후 자동으로 다음 사진으로 넘어가도록 한다
:interval = 다음 사진으로 넘어갈 시간 설정
<v-carousel-item /> = 아이템에 사진의 데이터를 넣어준다
v-if를 통해 해당하는 정보가 존재하지 않을 경우 출력하지 않도록 한다
카카오맵 추가
<div
id="kmap"
ref="map"
style="width:100%; height:400px"
/>DetailCulture.vue (script)
<script>
export default {
data: () => ({
tours: {}, // 공통정보
images: {}, // 이미지 정보
detailInfo: {}, // 반복 정보
detailIntro: {}, // 소개 정보
}),
mounted(){
this.getTourCommonInfo();
this.getTourDetailImage();
this.getTourDetailIntro();
this.getTourDetailInfo();
this.initMap();
},
// 공통 정보
methods: {
getTourCommonInfo(){
let contentid = this.$route.query.contentid;
this.$axios.get("/apitest/commonInfo?" + "contentId=" + contentid)
.then(response=>{
this.tours = response.data.response.body.items.item;
console.log(response.data);
})
.catch(e=>{
console.log(e);
})
},
// 이미지 정보
getTourDetailImage(){
let contentid = this.$route.query.contentid;
this.$axios.get("/apitest/detailImage?" + "contentId=" + contentid)
.then(response=>{
this.images = response.data.response.body.items.item;
console.log(response.data);
})
.catch(e=>{
console.log(e);
})
},
// 반복 정보
getTourDetailInfo(){
let contentid = this.$route.query.contentid;
let contenttypeid = this.$route.query.contenttypeid;
this.$axios.get("/apitest/detailInfo?" + "contentId=" + contentid + "&contentTypeId=" + contenttypeid)
.then(response=>{
this.detailInfo = response.data.response.body.items.item;
console.log(response.data);
})
.catch(e=>{
console.log(e);
})
},
// 소개 정보
getTourDetailIntro(){
let contentid = this.$route.query.contentid;
let contenttypeid = this.$route.query.contenttypeid;
this.$axios.get("/apitest/detailIntro?" + "contentId=" + contentid + "&contentTypeId=" + contenttypeid)
.then(response=>{
this.detailIntro = response.data.response.body.items.item;
console.log(response.data);
})
.catch(e=>{
console.log(e);
})
},
initMap(){
console.log(this.$refs.map);
let mapx = this.$route.query.mapx;
let mapy = this.$route.query.mapy;
var container = this.$refs.map; //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(mapy, mapx), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
// 마커가 표시될 위치
var markerPosition = new kakao.maps.LatLng(mapy, mapx);
// 마커를 생성
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정
marker.setMap(map)
}
}
}
</script>initMap()
카카오맵을 표시하기 위한 메소드
mapx,mapy를 받아온 쿼리를 통해 카카오맵을 출력
참고
https://vuetifyjs.com/en/api/v-carousel/#props
https://www.youtube.com/watch?v=BYT0zR2lbXQ