Map.svelte
2.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<style>
#map_bg {
box-sizing: border-box;
justify-content: center;
display: flex;
height: 100vh;
background-color:#edeff2;
}
#map {
margin-top: 50px;
box-sizing: border-box;
display: flex;
height: 80vh;
width: 60vw;
background-color:#edeff2;
border-radius: 10px;
border: 1px solid black;
box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
}
</style>
<script>
import jQuery from 'jquery';
import Info from './Side/Info.svelte';
var {kakao} = window;
var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json";
let ShowInfo = false;
let Festa = {};
var markers= [];
var map;
function createMap() {
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(36.46682, 127.37865), // 지도의 중심좌표
level: 12, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
markers= [];
map = new kakao.maps.Map(mapContainer, mapOption); // 카카오 지도
// 임시로 관광공사에서 JSON 직접 불러와서 하는 중
jQuery.getJSON(url, (json) => {drawMarkers( json.response.body.items.item )});
}
function drawMarkers (data) {
let len = data.length >= 9 ? 9 : data.length;
for(var i = 0; i < len; i++){
// 지도에 마커를 생성하고 표시한다
let marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(data[i].mapy, data[i].mapx), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
markers.push(marker);
// 마커 클릭 시 이벤트
let showInfo = function(festa) {
return function() {
Festa = festa;
ShowInfo = true;
console.log(Festa);
}
};
kakao.maps.event.addListener(markers[i], 'click', showInfo(data[i]));
};
// 마커 위에 표시할 인포윈도우를 생성한다
for(var i = 0; i<9;i++) { // 왜 9까지 밖에 안되누 ㅠㅠ
let infowindow = new kakao.maps.InfoWindow({
content : '<div style="padding:5px;">' + data[i].title + '</div>' // 인포윈도우에 표시할 내용
});
infowindow.open(map, markers[i]);
}
}
</script>
<svelte:window on:load={createMap}></svelte:window>
<Info bind:sidebar_show={ShowInfo} bind:festa={Festa}/>
<div id="map_bg">
<div id="map"></div>
</div>