최지우 / oss_project

Go to a project
Toggle navigation Toggle navigation pinning
최지우
101f0352 1 parent ae6b9301

출발지, 도착지 파라미터 전달

Inline Side-by-side
Showing 2 changed files with 44 additions and 12 deletions
...@@ -6,8 +6,9 @@ ...@@ -6,8 +6,9 @@
6 6
7 </head> 7 </head>
8 <body> 8 <body>
9 -<div id="map" style="width:100%;height:350px;"></div> 9 +<div id="map" style="width:100%;height:800px;"></div>
10 -<p><em>출발지와 도착지를 설정해주세요!</em></p> 10 +<p>출발지와 도착지를 설정해주세요!</p>
11 +
11 12
12 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀"></script> 13 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀"></script>
13 <script> 14 <script>
...@@ -40,6 +41,7 @@ var startDragImage = new kakao.maps.MarkerImage(startDragSrc, startDragSize, sta ...@@ -40,6 +41,7 @@ var startDragImage = new kakao.maps.MarkerImage(startDragSrc, startDragSize, sta
40 // 출발 마커가 표시될 위치입니다 41 // 출발 마커가 표시될 위치입니다
41 var startPosition = new kakao.maps.LatLng(33.450701, 126.570667); 42 var startPosition = new kakao.maps.LatLng(33.450701, 126.570667);
42 43
44 +
43 // 출발 마커를 생성합니다 45 // 출발 마커를 생성합니다
44 var startMarker = new kakao.maps.Marker({ 46 var startMarker = new kakao.maps.Marker({
45 map: map, // 출발 마커가 지도 위에 표시되도록 설정합니다 47 map: map, // 출발 마커가 지도 위에 표시되도록 설정합니다
...@@ -48,6 +50,7 @@ var startMarker = new kakao.maps.Marker({ ...@@ -48,6 +50,7 @@ var startMarker = new kakao.maps.Marker({
48 image: startImage // 출발 마커이미지를 설정합니다 50 image: startImage // 출발 마커이미지를 설정합니다
49 }); 51 });
50 52
53 +
51 // 출발 마커에 dragstart 이벤트를 등록합니다 54 // 출발 마커에 dragstart 이벤트를 등록합니다
52 kakao.maps.event.addListener(startMarker, 'dragstart', function() { 55 kakao.maps.event.addListener(startMarker, 'dragstart', function() {
53 // 출발 마커의 드래그가 시작될 때 마커 이미지를 변경합니다 56 // 출발 마커의 드래그가 시작될 때 마커 이미지를 변경합니다
...@@ -66,6 +69,7 @@ arriveOption = { ...@@ -66,6 +69,7 @@ arriveOption = {
66 offset: new kakao.maps.Point(15, 43) // 도착 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다) 69 offset: new kakao.maps.Point(15, 43) // 도착 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
67 }; 70 };
68 71
72 +
69 // 도착 마커 이미지를 생성합니다 73 // 도착 마커 이미지를 생성합니다
70 var arriveImage = new kakao.maps.MarkerImage(arriveSrc, arriveSize, arriveOption); 74 var arriveImage = new kakao.maps.MarkerImage(arriveSrc, arriveSize, arriveOption);
71 75
...@@ -100,6 +104,18 @@ kakao.maps.event.addListener(arriveMarker, 'dragend', function() { ...@@ -100,6 +104,18 @@ kakao.maps.event.addListener(arriveMarker, 'dragend', function() {
100 // 도착 마커의 드래그가 종료될 때 마커 이미지를 원래 이미지로 변경합니다 104 // 도착 마커의 드래그가 종료될 때 마커 이미지를 원래 이미지로 변경합니다
101 arriveMarker.setImage(arriveImage); 105 arriveMarker.setImage(arriveImage);
102 }); 106 });
107 +
108 +</script>
109 +<button type="button" onclick="Search();">text</button>
110 +<script>
111 + function Search(){
112 + var startx = startMarker.getPosition().getLat();
113 + var starty = startMarker.getPosition().getLng();
114 + var endx = arriveMarker.getPosition().getLat();
115 + var endy = arriveMarker.getPosition().getLng();
116 + location.href ='/search?startx='+ startx +'&starty='+ starty +'&endx=' + endx + '&endy=' + endy;
117 +}
103 </script> 118 </script>
119 +
104 </body> 120 </body>
105 </html> 121 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -6,22 +6,38 @@ ...@@ -6,22 +6,38 @@
6 6
7 </head> 7 </head>
8 <body> 8 <body>
9 -<p style="margin-top:-12px"> 9 +
10 - <em class="link"> 10 +<div id="map" style="width:100%;height:800px;"></div>
11 - <a href="/web/documentation/#CategoryCode" target="_blank">카테고리 코드목록을 보시려면 여기를 클릭하세요!</a>
12 - </em>
13 -</p>
14 -<div id="map" style="width:100%;height:350px;"></div>
15 11
16 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀&libraries=services"></script> 12 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀&libraries=services"></script>
17 <script> 13 <script>
14 +var Request = function() {
15 + this.getParameter = function(name) {
16 + var rtnval = '';
17 + var nowAddress = unescape(location.href);
18 + var parameters = (nowAddress.slice(nowAddress.indexOf('?') + 1, nowAddress.length)).split('&');
19 + for (var i = 0; i < parameters.length; i++) {
20 + var varName = parameters[i].split('=')[0];
21 + if (varName.toUpperCase() == name.toUpperCase()) {
22 + rtnval = parameters[i].split('=')[1];
23 + break;
24 + }
25 + }
26 + return rtnval;
27 + }
28 + }
29 +var request = new Request();
30 +var startx = request.getParameter('startx');
31 +var starty = request.getParameter('starty');
32 +var endx = request.getParameter('endx');
33 +var endy = request.getParameter('endy');
18 // 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다 34 // 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
19 var infowindow = new kakao.maps.InfoWindow({zIndex:1}); 35 var infowindow = new kakao.maps.InfoWindow({zIndex:1});
20 36
21 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 37 var mapContainer = document.getElementById('map'), // 지도를 표시할 div
22 mapOption = { 38 mapOption = {
23 - center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표 39 + center: new kakao.maps.LatLng(endx, endy), // 지도의 중심좌표
24 - level: 3 // 지도의 확대 레벨 40 + level: 5 // 지도의 확대 레벨
25 }; 41 };
26 42
27 // 지도를 생성합니다 43 // 지도를 생성합니다
...@@ -30,8 +46,8 @@ var map = new kakao.maps.Map(mapContainer, mapOption); ...@@ -30,8 +46,8 @@ var map = new kakao.maps.Map(mapContainer, mapOption);
30 // 장소 검색 객체를 생성합니다 46 // 장소 검색 객체를 생성합니다
31 var ps = new kakao.maps.services.Places(map); 47 var ps = new kakao.maps.services.Places(map);
32 48
33 -// 카테고리로 은행을 검색합니다 49 +// 카테고리로 유명관광지를 검색합니다
34 -ps.categorySearch('BK9', placesSearchCB, {useMapBounds:true}); 50 +ps.categorySearch('AT4', placesSearchCB, {useMapBounds:true});
35 51
36 // 키워드 검색 완료 시 호출되는 콜백함수 입니다 52 // 키워드 검색 완료 시 호출되는 콜백함수 입니다
37 function placesSearchCB (data, status, pagination) { 53 function placesSearchCB (data, status, pagination) {
......