최유정

get static map img

Showing 1 changed file with 26 additions and 64 deletions
1 -//### csv 파일에서 정보를 읽어오고, 2차원 배열화
2 1
3 -const parse = require("csv-parse/lib/sync");
4 -const fs = require("fs");
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 -
12 -for (var i = 0; i < records.length; i++){
13 - for(var j = 0; j < records[i].length; j++){
14 - addr.push(records[i][4]);
15 - }
16 - console.log(addr);
17 -
18 -}
19 -
20 -
21 -
22 -//------------------------------------------------------------------
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 - };
32 -
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
2 +var locationx;
3 +var locationy;
4 +var location_name;
5 +
6 +
7 +// 이미지 지도에 표시할 마커입니다
8 +// 이미지 지도에 표시할 마커를 아래와 같이 배열로 넣어주면 여러개의 마커를 표시할 수 있습니다
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 옵션을 설정하면 마커 위에 텍스트를 함께 표시할 수 있습니다
16 + }
17 +];
18 +
19 +var staticMapContainer = document.getElementById('staticMap'), // 이미지 지도를 표시할 div
20 + staticMapOption = {
21 + center: new kakao.maps.LatLng(locationx, locationy), // 이미지 지도의 중심좌표
22 + level: 3, // 이미지 지도의 확대 레벨
23 + marker: markers // 이미지 지도에 표시할 마커
24 + };
25 +
26 +// 이미지 지도를 생성합니다
27 +var staticMap = new kakao.maps.StaticMap(staticMapContainer, staticMapOption);
...\ No newline at end of file ...\ No newline at end of file
......