최유정

get static map img

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
......