Showing
1 changed file
with
20 additions
and
58 deletions
1 | -//### csv 파일에서 정보를 읽어오고, 2차원 배열화 | ||
2 | 1 | ||
3 | -const parse = require("csv-parse/lib/sync"); | 2 | +var locationx; |
4 | -const fs = require("fs"); | 3 | +var locationy; |
4 | +var location_name; | ||
5 | 5 | ||
6 | -const csv = fs.readFileSync("todolistdata.csv"); | ||
7 | -console.log(csv.toString()); | ||
8 | -//parse 메서드 -> 2차원배열화 | ||
9 | -const records = parse(csv.toString()); | ||
10 | -const addr = [] | ||
11 | 6 | ||
12 | -for (var i = 0; i < records.length; i++){ | 7 | +// 이미지 지도에 표시할 마커입니다 |
13 | - for(var j = 0; j < records[i].length; j++){ | 8 | +// 이미지 지도에 표시할 마커를 아래와 같이 배열로 넣어주면 여러개의 마커를 표시할 수 있습니다 |
14 | - addr.push(records[i][4]); | 9 | +var markers = [ |
10 | + { | ||
11 | + position: new kakao.maps.LatLng(locationx, locationy) | ||
12 | + }, | ||
13 | + { | ||
14 | + position: new kakao.maps.LatLng(locationx, locationy), | ||
15 | + text: '추천할 장소 : ' + location_name // text 옵션을 설정하면 마커 위에 텍스트를 함께 표시할 수 있습니다 | ||
15 | } | 16 | } |
16 | - console.log(addr); | 17 | +]; |
17 | 18 | ||
18 | -} | 19 | +var staticMapContainer = document.getElementById('staticMap'), // 이미지 지도를 표시할 div |
19 | - | 20 | + staticMapOption = { |
20 | - | 21 | + center: new kakao.maps.LatLng(locationx, locationy), // 이미지 지도의 중심좌표 |
21 | - | 22 | + level: 3, // 이미지 지도의 확대 레벨 |
22 | -//------------------------------------------------------------------ | 23 | + marker: markers // 이미지 지도에 표시할 마커 |
23 | -//###주소로 장소 검색하기### | ||
24 | - | ||
25 | - | ||
26 | - | ||
27 | -var mapContainer = document.getElementById('map'), // 지도를 표시할 div | ||
28 | - mapOption = { | ||
29 | - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표 | ||
30 | - level: 3 // 지도의 확대 레벨 | ||
31 | }; | 24 | }; |
32 | 25 | ||
33 | -// 지도를 생성합니다 | ||
34 | -var map = new kakao.maps.Map(mapContainer, mapOption); | ||
35 | - | ||
36 | -// 주소-좌표 변환 객체를 생성합니다 | ||
37 | -var geocoder = new kakao.maps.services.Geocoder(); | ||
38 | - | ||
39 | -// 찾을 주소 | ||
40 | -var searchAddress; | ||
41 | - | ||
42 | -// 주소로 좌표를 검색합니다 | ||
43 | -geocoder.addressSearch(searchAddress, function(result, status) { | ||
44 | - | ||
45 | - // 정상적으로 검색이 완료됐으면 | ||
46 | - if (status === kakao.maps.services.Status.OK) { | ||
47 | - | ||
48 | - var coords = new kakao.maps.LatLng(result[0].y, result[0].x); | ||
49 | - | ||
50 | - // 결과값으로 받은 위치를 마커로 표시합니다 | ||
51 | - var marker = new kakao.maps.Marker({ | ||
52 | - map: map, | ||
53 | - position: coords | ||
54 | - }); | ||
55 | - | ||
56 | - // 인포윈도우로 장소에 대한 설명을 표시합니다 | ||
57 | - var infowindow = new kakao.maps.InfoWindow({ | ||
58 | - content: '<div style="width:150px;text-align:center;padding:6px 0;">목적지</div>' | ||
59 | - }); | ||
60 | - infowindow.open(map, marker); | ||
61 | - | ||
62 | - // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다 | ||
63 | - map.setCenter(coords); | ||
64 | - } | ||
65 | -}); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
26 | +// 이미지 지도를 생성합니다 | ||
27 | +var staticMap = new kakao.maps.StaticMap(staticMapContainer, staticMapOption); | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or login to post a comment