최지우 / oss_project

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

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

Inline Side-by-side
Showing 2 changed files with 47 additions and 15 deletions
......@@ -6,8 +6,9 @@
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<p><em>출발지와 도착지를 설정해주세요!</em></p>
<div id="map" style="width:100%;height:800px;"></div>
<p>출발지와 도착지를 설정해주세요!</p>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀"></script>
<script>
......@@ -37,8 +38,9 @@ var startDragSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red
// 출발 마커의 드래그 이미지를 생성합니다
var startDragImage = new kakao.maps.MarkerImage(startDragSrc, startDragSize, startDragOption);
// 출발 마커가 표시될 위치입니다
var startPosition = new kakao.maps.LatLng(33.450701, 126.570667);
// 출발 마커가 표시될 위치입니다
var startPosition = new kakao.maps.LatLng(33.450701, 126.570667);
// 출발 마커를 생성합니다
var startMarker = new kakao.maps.Marker({
......@@ -48,6 +50,7 @@ var startMarker = new kakao.maps.Marker({
image: startImage // 출발 마커이미지를 설정합니다
});
// 출발 마커에 dragstart 이벤트를 등록합니다
kakao.maps.event.addListener(startMarker, 'dragstart', function() {
// 출발 마커의 드래그가 시작될 때 마커 이미지를 변경합니다
......@@ -66,6 +69,7 @@ arriveOption = {
offset: new kakao.maps.Point(15, 43) // 도착 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
};
// 도착 마커 이미지를 생성합니다
var arriveImage = new kakao.maps.MarkerImage(arriveSrc, arriveSize, arriveOption);
......@@ -80,7 +84,7 @@ var arriveDragImage = new kakao.maps.MarkerImage(arriveDragSrc, arriveDragSize,
// 도착 마커가 표시될 위치입니다
var arrivePosition = new kakao.maps.LatLng(33.450701, 126.572667);
// 도착 마커를 생성합니다
var arriveMarker = new kakao.maps.Marker({
map: map, // 도착 마커가 지도 위에 표시되도록 설정합니다
......@@ -100,6 +104,18 @@ kakao.maps.event.addListener(arriveMarker, 'dragend', function() {
// 도착 마커의 드래그가 종료될 때 마커 이미지를 원래 이미지로 변경합니다
arriveMarker.setImage(arriveImage);
});
</script>
<button type="button" onclick="Search();">text</button>
<script>
function Search(){
var startx = startMarker.getPosition().getLat();
var starty = startMarker.getPosition().getLng();
var endx = arriveMarker.getPosition().getLat();
var endy = arriveMarker.getPosition().getLng();
location.href ='/search?startx='+ startx +'&starty='+ starty +'&endx=' + endx + '&endy=' + endy;
}
</script>
</body>
</html>
\ No newline at end of file
......
......@@ -6,22 +6,38 @@
</head>
<body>
<p style="margin-top:-12px">
<em class="link">
<a href="/web/documentation/#CategoryCode" target="_blank">카테고리 코드목록을 보시려면 여기를 클릭하세요!</a>
</em>
</p>
<div id="map" style="width:100%;height:350px;"></div>
<div id="map" style="width:100%;height:800px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=비밀&libraries=services"></script>
<script>
var Request = function() {
this.getParameter = function(name) {
var rtnval = '';
var nowAddress = unescape(location.href);
var parameters = (nowAddress.slice(nowAddress.indexOf('?') + 1, nowAddress.length)).split('&');
for (var i = 0; i < parameters.length; i++) {
var varName = parameters[i].split('=')[0];
if (varName.toUpperCase() == name.toUpperCase()) {
rtnval = parameters[i].split('=')[1];
break;
}
}
return rtnval;
}
}
var request = new Request();
var startx = request.getParameter('startx');
var starty = request.getParameter('starty');
var endx = request.getParameter('endx');
var endy = request.getParameter('endy');
// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
var infowindow = new kakao.maps.InfoWindow({zIndex:1});
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
center: new kakao.maps.LatLng(endx, endy), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
// 지도를 생성합니다
......@@ -30,8 +46,8 @@ var map = new kakao.maps.Map(mapContainer, mapOption);
// 장소 검색 객체를 생성합니다
var ps = new kakao.maps.services.Places(map);
// 카테고리로 은행을 검색합니다
ps.categorySearch('BK9', placesSearchCB, {useMapBounds:true});
// 카테고리로 유명관광지를 검색합니다
ps.categorySearch('AT4', placesSearchCB, {useMapBounds:true});
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (data, status, pagination) {
......