야후 코리아의 지도 오픈 API를 이용하여 어플리케이션을 만들어 보자.
앞의 어플리케이션처럼 웹 어플리케이션을 호출하는 방식이 아닌 로컬의 html을 이용하도록 수정한다.
1. 야후 지도를 표시 하기 위한 html
주목할 것은 iPhone의 mobile-safari에서 제공하는 touchstart, touchmove, touchend이벤트이다. touch관련 이벤트를 구현함으로서 웹브라우저에서와 같이 터치에 의한 지도 이동 기능을 구현 할 수 있었다. PhoneGap의 코드에서 이벤트를 구현하지 않아도 됨을 알 수 있다.
event.touches.length : 화면을 터치 중인 키(손가락)의 숫자를 나타낸다. 이번 예는 1인 경우만 처리한다.
event.touch[0].pageX,
event.touch[0].pageY : 현재 터치된 위치의 좌표를 저장하고 있다.
event.touch[n]에서 n은 터치된 키의 숫자만큼의 좌표를 배열로 저장하고 있다.
2. 로컬 html을 호출 하도록 PhoneGap의 코드 일부를 수정
url.txt의 파일을 참조하는 코드 부분을 직접 index.html을 호출하도록 수정한다.
/Classes/GlassAppDelegate.m 파일을 에디터로 읽어 온다. 구현 함수들 중에 "applicationDidFinishLaunching"를 찾는다.
함수의 구현부분에서 "NSString * htmlFileName;" 에서 "[window makeKeyAndVisible];" 사이의 코드를 아래의 코드로 변경한다.
3. 빌드 후 실행
iPhone시뮬레이터에서 실행된 화면이다. 맥북의 터치패드에서 화면 스크롤 하듯이 두손가락으로 움직여 보면 알 수 있다.
html에 시작 좌표를 삼성역 부근으로 설정 했으나 화면을 보면 강남역으로 이동 시킨 것을 알 수 있다.
터치 이동에 대한 이벤트를 프레임워크 단에서 추가하여야만 하는 것으로 생각했지만, html단에서 touch관련 이벤트를 처리하는 것으로 가능함을 알 수 있었다. iPhone에서 제공하는 gesture이벤트도 문제없이 동작할 것으로 생각한다.
이제, 현재 위치를 표시하기 위해 GPS의 값을 읽어오는 것을 추가하면 된다.
지도의 이동을 위해 iPhone의 touch이벤트를 이용했지만, 게임을 이용하듯이 중력센서를 이용해서 지도 이동을 시켜 보는 것도 재미 있을 것 같다.
앞의 어플리케이션처럼 웹 어플리케이션을 호출하는 방식이 아닌 로컬의 html을 이용하도록 수정한다.
1. 야후 지도를 표시 하기 위한 html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo.kr map</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="minimum-scale=1.0, height=device-height, width=device-width, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=[]"></script>
<script type="text/javascript" src="gap.js"></script>
<style type="text/css">
#map{
height: 430px;
width: 100%;
}
</style>
<script type="text/javascript">
<!--
var map;
function StartYMap()
{
// 지도 오브젝트를 생성 합니다.
map = new YMap(document.getElementById('map'));
// 지도 확대/축소 콘트롤을 추가합니다.
//map.addZoomLong();
// 지도보기 유형을 선택합니다.
// YAHOO_MAP_SAT: 위성지도
// YAHOO_MAP_HYB: 하이브리드 지도
// YAHOO_MAP_REG: 일반지도
map.setMapType(YAHOO_MAP_REG);
// WGS84 좌표계의 경위도 좌표 오브젝트를 전달하여 위치를 지정
// var center_point = new YGeoPoint(37.37160610616,127.10718565157);
// map.drawZoomAndCenter(center_point,3);
var center_point = new YGeoPoint(37.511411132213,127.05925359288);
map.drawZoomAndCenter(center_point,2);
init();
}
window.onload = StartYMap;
// 初期化
function init() {
var objMap = document.getElementById("map");
objMap.addEventListener("touchstart", touchHandlerStart, true);
objMap.addEventListener("touchmove", touchHandler, true);
objMap.addEventListener("touchend", touchHandlerEnd, true);
}
var startX, startY;
function touchHandlerStart(event) {
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
event.preventDefault();
}
function touchHandlerEnd(event) {
event.preventDefault();
}
function touchHandler(event) {
// タッチ数を取得 event.touches.length
// タッチ位置を取得
if(event.touches.length == 1) {
// CHENG님이 버그를 수정해 주셨습니다. 2009.05.15
var deltaX = event.touches[0].pageX - startX;
var deltaX = startX - event.touches[0].pageX;
var deltaY = event.touches[0].pageY - startY;
var deltaY = startY - event.touches[0].pageY;
var centerLatLon = map.getCenterLatLon();
var centerXY = map.convertLatLonXY(centerLatLon);
centerXY.x += deltaX;
centerXY.y += deltaY;
var newCenterLatLon = map.convertXYLatLon(centerXY);
//map.drawZoomAndCenter(newCenterLatLon,2);
map.panToLatLon(newCenterLatLon);
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
}
event.preventDefault();
}
//-->
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
주목할 것은 iPhone의 mobile-safari에서 제공하는 touchstart, touchmove, touchend이벤트이다. touch관련 이벤트를 구현함으로서 웹브라우저에서와 같이 터치에 의한 지도 이동 기능을 구현 할 수 있었다. PhoneGap의 코드에서 이벤트를 구현하지 않아도 됨을 알 수 있다.
event.touches.length : 화면을 터치 중인 키(손가락)의 숫자를 나타낸다. 이번 예는 1인 경우만 처리한다.
event.touch[0].pageX,
event.touch[0].pageY : 현재 터치된 위치의 좌표를 저장하고 있다.
event.touch[n]에서 n은 터치된 키의 숫자만큼의 좌표를 배열로 저장하고 있다.
2. 로컬 html을 호출 하도록 PhoneGap의 코드 일부를 수정
url.txt의 파일을 참조하는 코드 부분을 직접 index.html을 호출하도록 수정한다.
/Classes/GlassAppDelegate.m 파일을 에디터로 읽어 온다. 구현 함수들 중에 "applicationDidFinishLaunching"를 찾는다.
함수의 구현부분에서 "NSString * htmlFileName;" 에서 "[window makeKeyAndVisible];" 사이의 코드를 아래의 코드로 변경한다.
NSString * htmlFileName;
NSString * urlFileName;
htmlFileName = @"index";
urlFileName = @"url";
NSString * urlPathString;
NSBundle * thisBundle = [NSBundle bundleForClass:[self class]];
if (urlPathString = [thisBundle pathForResource:htmlFileName ofType:@"html"]) {
[webView loadRequest:[NSURLRequest
requestWithURL:[NSURL fileURLWithPath:urlPathString]
cachePolicy:NSURLRequestUseProtocolCachePolicy
timeoutInterval:20.0]];
}
[window makeKeyAndVisible];
3. 빌드 후 실행
iPhone시뮬레이터에서 실행된 화면이다. 맥북의 터치패드에서 화면 스크롤 하듯이 두손가락으로 움직여 보면 알 수 있다.
html에 시작 좌표를 삼성역 부근으로 설정 했으나 화면을 보면 강남역으로 이동 시킨 것을 알 수 있다.
터치 이동에 대한 이벤트를 프레임워크 단에서 추가하여야만 하는 것으로 생각했지만, html단에서 touch관련 이벤트를 처리하는 것으로 가능함을 알 수 있었다. iPhone에서 제공하는 gesture이벤트도 문제없이 동작할 것으로 생각한다.
이제, 현재 위치를 표시하기 위해 GPS의 값을 읽어오는 것을 추가하면 된다.
지도의 이동을 위해 iPhone의 touch이벤트를 이용했지만, 게임을 이용하듯이 중력센서를 이용해서 지도 이동을 시켜 보는 것도 재미 있을 것 같다.
덧글
var deltaY = event.touches[0].pageY - startY;
요 부분을
var deltaX = startX - event.touches[0].pageX ;
var deltaY = startY - event.touches[0].pageY;
라고 고쳐야 방향이 맞더군요, 글 잘 봤습니다. 많은 도움이 되었습니다.
그리고 궁금한 점이 있어서 "IDtail" 로 쪽지 드렸습니다.
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/chapter_7_section_6.html
2009/05/23 02:03 # 삭제 
비공개 덧글입니다.