Map.svelte
3.19 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<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 Info from './SideItems/Info.svelte';
import Festalist from './SideItems/Festalist.svelte';
import Arealist from './SideItems/Arealist.svelte';
import { COORDINATES } from "./Data/coordinates";
import { DisplayedFestas } from "./Stores/DisplayedFestas";
var {kakao} = window;
var ShowArea = false;
var ShowFesta = false;
var ShowInfo = false;
var Festa = {};
var markers = [];
var infowindows = [];
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); // 카카오 지도
}
$: drawMarkers($DisplayedFestas);
function drawMarkers (data) {
let len = data.length >= 9 ? 9 : data.length;
markers.forEach( mk => {
mk.setMap(null);
});
infowindows.forEach( iw => {
iw.close();
});
markers, infowindows = [], [];
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 // 마커를 표시할 지도 객체
});
let infowindow = new kakao.maps.InfoWindow({
content : '<div style="padding:5px;white-space:nowrap;">' + data[i].title + '</div>' // 인포윈도우에 표시할 내용
});
infowindow.open(map, marker);
// 마커 클릭 시 이벤트
let showInfo = function(festa) {
return function() {
Festa = festa;
ShowInfo = true;
console.log(Festa);
}
};
kakao.maps.event.addListener(marker, 'click', showInfo(data[i]));
infowindows.push(infowindow);
markers.push(marker);
};
}
function moveTo(district, city) {
let [x, y, level] = COORDINATES[district][city];
var moveLatLon = new kakao.maps.LatLng(y, x);
map.setLevel(level);
map.panTo(moveLatLon);
}
function closeBars() {
ShowArea = false;
ShowFesta = false;
ShowInfo = false;
}
</script>
<svelte:window on:load={createMap}></svelte:window>
<Festalist bind:sidebar_show={ShowFesta}/>
<Arealist bind:sidebar_show={ShowArea} {moveTo}/>
<Info bind:sidebar_show={ShowInfo} bind:festa={Festa}/>
<div id="map_bg">
<div id="map"></div>
</div>