메인 컨텐츠로 가기

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관 보기.

developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

모든 정보가 안전하게 전송되었습니다.

  • 닫기 [x]

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관 보기.

모든 정보가 안전하게 전송되었습니다.

  • 닫기 [x]

GPS 사용 웹 애플리케이션 작성

PHP, XML, jQuery 및 내장 브라우저 GPS로 위치 사용 뉴스 피드 빌드

Jack Herrington, 소프트웨어 엔지니어, Leverage Software Inc.
Jack D. Herrington은 20년 경력의 소프트웨어 엔지니어이다. Code Generation in Action, Podcasting Hacks, PHP Hacks(출간 예정)의 저자이기도 하다. 30개 이상의 기술자료도 집필했다. (jack_d_herrington@codegeneration.net)

요약:  이 기사는 PHP를 사용하여 GPS 사용 웹 애플리케이션의 백엔드 및 프론트엔드 빌드하기를 안내합니다.

기사 게재일:  2011 년 11 월 01 일
난이도: 초급 원문:  보기 PDF:  A4 and Letter (1089KB | 18 pages)Get Adobe® Reader®
페이지뷰:  1536 회
의견:  


GPS 사용 웹 애플리케이션

자주 사용하는 약어

  • Ajax: Asynchronous JavaScript + XML
  • API: Application programming interface
  • DOM: Document Object Mode
  • GPS: Global positioning system
  • HTML: HyperText Markup Language
  • HTTP: Hypertext Transfer Protocol
  • PDO: PHP Data Object
  • SQL: Structured Query Language
  • URL: Uniform Resource Locator
  • W3C: World Wide Web Consortium
  • XML: Extensible Markup Language

지리적 위치에 따라 서비스를 제공하는 웹 사이트는 인터넷에서 매우 대중적이다. Foursquare, Yelp 및 Google Maps 등의 사이트들은 해당 위치에서 관련된 정보를 제공하기 위해 독자가 있는 장소를 모두 사용한다. 어떠한 사람의 위치를 간편하게 얻고 해당 로케일에 따라 정보를 제공할 수 있다.

이 기사에서 새 컨텐츠를 사용자에게 제공하기 위한 GPS 위치를 사용하는 애플리케이션의 백엔드와 프론트엔드 둘 다 빌드할 것이다. 백엔드는 PHP로 쓰이고 MySQL을 사용하여 기사의 목록과 관련된 위치와 해당 좌표를 보유한다. 프론트엔드 웹 페이지는 사용자의 GPS 좌표를 얻기 위해 웹킷 브라우저로 지원되는 위치 서비스를 사용한다. 그 다음에 Ajax 요청에서 백엔드로 이러한 좌표를 전송한다. PHP 백엔드 시스템은 기사의 XML 목록에 응답하면, 프론트엔드가 동적으로 렌더링한다.

이 기사에서 다른 두 가지 방법으로 위치를 사용한다. 첫 번째는 새 기사를 데이터베이스로 추가하는 시점이다. PHP 백엔드에 위치를 제공하며(예를 들어, Fremont, CA 또는 Washington, DC), 페이지는 Yahoo!가 제공하는 위치정보 서비스를 사용하여 해당 위치를 GPS 좌표로 변환한다. 위치를 사용하는 두 번째 방법은 웹 페이지가 사용자의 위치를 얻기 위해 브라우저로 요청을 작성하고 Ajax를 사용하여 데이터베이스를 쿼리하기 위해 해당 정보를 사용하는 시점이다.


백엔드 빌드하기

백엔드 코드는 데이터베이스에서 시작하며, 이 경우에 이는 MySQL이다. 목록 1은 하나의 테이블 데이터베이스에 대한 스키마를 보여준다.


목록 1. db.sql

DROP TABLE IF EXISTS articles;
CREATE TABLE articles(
     lon FLOAT,
     lat FLOAT,
     address TEXT,
     title TEXT,
     url TEXT,
     summary TEXT );

테이블에 여섯 가지 열이 있으며, 기사를 위해 제공된 위도와 경도 값 및 원래 주소로 시작한다(예를 들어, Fremont, CA). 그러면 제목, URL 및 요약을 비롯하여 기사에 대한 일부 전기적인 정보가 있다.

데이터베이스를 빌드하려면 다음과 같이 먼저 mysqladmin을 사용하여 이를 작성한 다음 mysql 명령을 사용하여 db.sql 스크립트를 사용한다.

% mysqladmin --user=root --password=foo create articles
% mysql --user=root --password=foo articles < db.sql

작성된 데이터베이스를 통해 데이터베이스로 레코드를 추가하기 위해 사용할 PHP 페이지를 빌드할 수 있다. 목록 2는 insert.php 페이지에 대한 코드를 보여준다. (참고: 5행 및 6행에서 $url의 값은 단일 문자열로 나타나야 한다. 이는 형식화 용도로만 두 개의 더 짧은 문자열로 나타난다.)


목록 2. insert.php

<?php
$dd = new PDO('mysql:host=localhost;dbname=articles', 'root', '');
if ( isset( $_POST['url'] ) ) {
// You need a Yahoo! PlaceFinder application key
// Go to: http://developer.yahoo.com/geo/placefinder/
  $url = "http://where.yahooapis.com/geocode?q=".urlencode($_POST['address']).
         "&appid=[yourappid] ";

  $ch = curl_init(); 
  curl_setopt($ch, CURLOPT_URL, $url); 
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); 
  $body = curl_exec($ch); 

  preg_match( "/\<latitude\>(.*?)\<\/latitude\>/", $body, $lat );
  preg_match( "/\<longitude\>(.*?)\<\/longitude\>/", $body, $lon );

  $sql = 'INSERT INTO articles VALUES ( ?, ?, ?, ?, ?, ? )';
  $sth = $dd->prepare($sql);
  $sth->execute( array( 
    $lon[1],
    $lat[1],
    $_POST['address'],
    $_POST['title'],
    $_POST['url'],
    $_POST['summary']
    ) );
}
?>
<html>
<body>
<form method="post">
<table>
<tr><th>Title</td><th><input type="text" name="title" /></td></tr>
<tr><th>Summary</th><td><input type="text" name="summary" /></td></tr>
<tr><th>Address</th><td><input type="text" name="address" /></td></tr>
<tr><th>URL</th><td><input type="text" name="url" /></td></tr>
</table>
<input type="submit" value="Add Article" />
</form>
</body>
</html>

이 페이지는 데이터베이스로 레코드를 삽입하기 위한 매우 표준적인 PHP 페이지이다. 맨 위에 사용자가 이 페이지를 게시했는지 확인한다. 그러한 경우, PDO 라이브러리를 사용하여 데이터베이스로 레코드를 추가한다. 스크립트의 맨 아래에 필드를 입력하기 위해 사용되는 HTML 양식이 있다.

여기에서 흥미로운 것은 Curl 라이브러리를 사용하여 Yahoo! 위치 웹 서비스로의 요청이다. 이 코드를 실행하려면 PlaceFinder 서비스를 위해 Yahoo!에서 제공하는 애플리케이션 ID가 필요하다. 이러한 서비스의 URL을 보려면 참고자료목록 2의 코드를 참조한다.

PlaceFinder 서비스는 주어진 위치에 대해 XML 응답을 리턴한다. 응답은 위도와 경도(덧붙여 흥미로운 정보의 훌륭한 많은 조각들)를 포함한다. 간단한 정규식은 XML로부터 위도와 경도를 추출하는 데 사용된다.

이 코드는 주소가 항상 좌표로 해결되는 것처럼 쓰인다. 자체 시스템에서 이 코드를 사용하도록 선택하는 경우, 위치가 리턴되는지 확인하고 위치가 해결되지 않은 경우에 사용자에게 정보적인 오류 메시지를 표현한다.

이 코드를 테스트하려면 PHP 서버에서 insert.php 페이지를 설치하고 브라우저에서 이를 가져온다. 그림 1과 같은 양식이 표시된다.


그림 1. 기사 입력 양식
Title, Summary, Address 및 URL 필드에 덧붙여 'Add Article' 단추가 있는 기사 입력 양식의 화면 캡처

그림 1은 제목, 요약, 주소 및 URL 필드와 데이터베이스로 기사를 추가하는 단추가 있는 간단한 네 개 필드로 된 웹 양식을 보여준다. 그림 2는 관련된 값으로 입력되는 필드를 보여준다.


그림 2. 입력된 기사 입력 양식
값이 입력된 기사 입력 양식의 화면 캡처

그림 2에서 필드는 판사의 판정에 대한 로컬 기사의 제목, 요약 및 URL로 입력되었다. 위치는 Address 필드에서 "fremont, ca"로 지정된다. 거리 주소, 우편 번호 또는 위도/경도 쌍으로 해결될 수 있는 또 다른 것을 지정할 수 있다.

이제 로컬 영역에 대해 일부 뉴스 기사로 insert.php 페이지를 사용하여 데이터베이스를 입력해야 한다. 또는 어느 곳에서나 나온 일부 기사를 사용하지만 주소를 넣기 때문에, 브라우저가 제공한 GPS 위치는 일부 결과를 리턴한다.

데이터베이스를 설정하고 입력된 상태로 프론트엔드가 사용할 검색 서비스를 빌드할 준비가 된 것이다.


검색 서비스 빌드하기

검색 서비스에서 필요한 것은 반경과 함께 위도와 경도 쌍을 취하고 해당 원이 있는 위치를 보유한 어느 기사나 리턴하는 PHP 페이지이다. 리턴은 XML로 인코딩되어야 하므로 웹 페이지(또는 다른 애플리케이션)가 이를 간편하게 읽을 수 있다. 목록 3은 PHP 페이지만을 보여준다.


목록 3. find.php

<?php
define( 'LATMILES', 1 / 69 );
define( 'LONMILES', 1 / 53 );

// Change these default coordinates to your current location
$lat = 37.3328;
$lon = -122.036;
$radius = 1.0;

if ( isset( $_GET['lat'] ) ) { $lat = (float)$_GET['lat']; }
if ( isset( $_GET['lon'] ) ) { $lon = (float)$_GET['lon']; }
if ( isset( $_GET['radius'] ) ) { $radius = (float)$_GET['radius']; }

$minlat = $lat - ( $radius * LONMILES );
$minlon = $lon - ( $radius * LATMILES );
$maxlat = $lat + ( $radius * LONMILES );
$maxlon = $lon + ( $radius * LATMILES );

$dbh = new PDO('mysql:host=localhost;dbname=articles', 'root', '');

$sql = 'SELECT * FROM articles WHERE lat >= ? AND lat <= ? AND lon >= ? AND lon <= ?';

$params = array( $minlat, $maxlat, $minlon, $maxlon );

if ( isset( $_GET['q'] ) ) {
  $sql .= " AND name LIKE ?";
  $params []= '%'.$_GET['q'].'%';
}

$q = $dbh->prepare( $sql );
$q->execute( $params );

$doc = new DOMDocument();
$r = $doc->createElement( "locations" );
$doc->appendChild( $r );

foreach ( $q->fetchAll() as $row) {
  $dlat = ( (float)$row['lat'] - $lat ) / LATMILES;
  $dlon = ( (float)$row['lon'] - $lon ) / LONMILES;
  $d = sqrt( ( $dlat * $dlat ) + ( $dlon * $dlon ) );
  if ( $d <= $radius ) {
    $e = $doc->createElement( "article" );
    $e->setAttribute( 'lat', $row['lat'] );
    $e->setAttribute( 'lon', $row['lon'] );
    $te = $doc->createElement('title');
    $te->appendChild( $doc->createTextNode( utf8_encode( $row['title'] ) ) );
    $e->appendChild( $te );
    $se = $doc->createElement('summary');
    $se->appendChild( $doc->createTextNode( utf8_encode( $row['summary'] ) ) );
    $e->appendChild( $se );
    $ue = $doc->createElement('url');
    $ue->appendChild( $doc->createTextNode( utf8_encode( $row['url'] ) ) );
    $e->appendChild( $ue );
    $ae = $doc->createElement('address');
    $ae->appendChild( $doc->createTextNode( utf8_encode( $row['address'] ) ) );
    $e->appendChild( $ae );
    $e->setAttribute( 'd', $d );
    $r->appendChild( $e );
  }
}

print $doc->saveXML();
?>

코드는 길고 복잡해 보이지만 실제로는 아니다. 이는 두 개의 구별된 섹션으로 나눌 수 있다. 맨 위에 스크립트는 위도와 경도 및 SELECT 명령문에서 최소/최대 제한조건을 사용하여 경계가 있는 사각형 내에서 기사를 모두 찾는 쿼리를 실행한다.

코드의 두 번째 부분은 각 기사를 통해 반복하고 원 내에 들어가는지 여부를 확인하여 결과를 추가로 억제한다. 이는 foreach 루프의 시작 부분에서 약간의 삼각함수 코드이다. 이는 원 내에 속하는 경우 결과는 즉시 작성된 XML DOM 문서로 추가된다. 코드의 최종 조각은 결과 XML 문서를 출력한다.

XML 작성은 작성된 모든 노드로 인해 약간 길어진다. 위도와 경도를 제외한 모든 기사 특성은 서브노드로 표현되기 때문에 무제한 크기가 될 수 있다. 이 접근방식은 매우 긴 요약 필드와 관련하여 특히 중요하다. 왜냐하면 이는 몇 몇 단락 길이인 기사의 시놉시스를 포함해야 하기 때문이다.

찾기 서비스를 테스트하려면 먼저 서버에 이를 설치한 다음에 브라우저에서 탐색한다. 그림 3과 같은 결과가 표시된다.


그림 3. 브라우저에서 렌더링된 찾은 결과 XML
브라우저에서 렌더링된 찾은 결과 XML의 화면 캡처

그림 3은 비록 보기에는 깔끔하지 않고 함께 뭉쳐있고 전혀 형식화되지 않았지만 웹 페이지 종류로 리턴된 XML 결과를 표시하는 브라우저를 보여준다. XML과 같은 내용이 표시되게 하려면 브라우저에서 View Source를 선택하여 그림 4와 유사하게 표시한다.


그림 4. find.php 결과의 소스 보기
find.php 결과의 XML 소스의 화면 캡처

그림 4는 원본 XML 형식에서 쿼리의 결과를 보여준다.

결과가 표시되지 않으면, 몇 가지 문제점이 있을 수 있다. 이는 스크립트가 데이터베이스에 연결될 수 없는 것일 수 있다. 위치가 문제가 될 수 있다. find.php 스크립트에서 기본 위치가 기사에서 지정한 곳과 가깝게 변경되어야 한다. 또는 lat 및 lon 매개변수를 웹 페이지 URL로 추가해야 한다. 또 다른 가능성은 기사에 올바르지 않은 위치가 있는 것이다. 올바른 위치를 확인하려면 MySQL 서버에 로그인하고 lat 및 lon 필드가 적절하게 채워져 있는지 확인하기 위해 기사 테이블을 스스로 쿼리한다.

find.php 스크립트가 일부 결과를 리턴한다고 가정하면, 이제 이 시스템에 프론트엔드를 놓을 준비가 된 것이다.


사용자 인터페이스의 첫 번째 버전 빌드하기

사용자 인터페이스의 첫 번째 버전은 매우 간단하다. 이는 브라우저에서 GPS 좌표를 얻고, 20마일의 하드코드된 검색 반경으로 서버에 전송한 다음 프리젠테이션에 리턴된 데이터를 형식화한다. 코드의 첫 번째 버전을 목록 4에서 확인할 수 있다.


목록 4. index.php

<html>
<head>
<script src="jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
  } else {
    alert('GPS not supported');
  }
});

function successCallback(position) {
  loadArticles( position.coords.latitude, position.coords.longitude );
}

function loadArticles( lat, lon ) {
  $.ajax({
    url: "find.php",
    dataType: 'xml',
    data: {
    lat:lat,
    lon:lon,
    radius:20
    },
    success: buildArticlePage
  });
}

function buildArticlePage( data ) {
  $(data).find("article").each(function() {
  var title = $(this).find("title").text();
  var summary = $(this).find("summary").text();
  var url = $(this).find("url").text();
  var address = $(this).find("address").text();
    $("#output").append( "<a target=\"_blank\" href=\""+url+"\">"+title+"</a><br/>");
    $("#output").append( "<i>"+address+"</i><br />");
    $("#output").append( summary+"<br /><br />");
  });
}

function errorCallback(error) {
  alert('Error getting GPS:'+error);
}
</script>
</head>
<body>
<div id="output">
</div>
</body> 
</html>

목록 4에서 가장 흥미로운 코드의 부분은 바로 파일의 가장 위에 있다. 로드한 후에 코드가 처음으로 수행하는 일 중 하나는 navigator.geolocation을 찾은 다음, 존재한다면 여기에서 getCurrentPosition 메소드를 실행하는 것이다. 해당 메소드는 둘 다 함수인 두 가지 매개변수를 취한다. 첫 번째 함수는 위치를 찾을 수 있다면 호출된다. 두 번째는 위치를 찾을 수 없다면 호출된다.

위치를 찾으면 successCallback이 호출되며, 이번에는 지정된 좌표를 통해 loadArticles를 호출한다. 필자는 좌표를 제공하기 위해 브라우저를 얻는 문제가 있다면 디버깅과 관련하여 지원하는 것 외에도 이러한 두 가지 함수 호출을 일으켰다. 선택한 좌표가 무엇이든지 간에 항상 loadArticles를 직접 호출할 수 있다.

loadArticles 함수는 jQuery Ajax 랩퍼를 사용하여 서버로 Ajax 요청을 만든다. 그리고 buildArticlePage는 웹 서버가 성공적으로 응답하면 호출된다. 이 페이지가 아니라 다른 디렉토리에 위치하는 경우 어디에 find.php가 있든지 가리키기 위해 loadArticles에서 URL을 변경해야 할 수 있다.

buildArticlePage는 jQuery 호출 시리즈를 사용하여 XML을 통해 구문 분석하고 새 HTML 태그를 HTML의 본문 섹션에 있는 "output" div로 추가한다.

그리고 여기까지가 내용의 전부이다. 필자는 GPS 지원을 웹 페이지로 쓰는 것은 iOS, Android 또는 다른 플랫폼에서 위치를 얻기 위해 독점 API를 사용하는 것보다 훨씬 더 간편하다고 생각한다. 브라우저 이벤트에서 위치정보 서비스가 신속하게 변경하도록 예상한다면 위치를 추적하는 것을 지원한다.

페이지를 테스트하려면 그림 5와 같이 웹 서버에서 index.html 페이지를 설치하고 브라우저에서 이를 연다.


그림 5. GPS 좌표를 사용하여 기사 결과를 얻은 후에 인덱스 페이지
GPS 좌표에 따라 기사 결과를 나열하는 인덱스 페이지의 화면 캡처

그림 5는 웹 브라우저가 제공하는 위치를 중심으로 위치한 데이터베이스로부터 기사의 웹 페이지를 보여준다. 데이터를 확인하기 전에 그림 6과 같은 경고가 표시될 수 있다.


그림 6. Safari 위치 경고 프롬프트
Safari 위치 경고 프롬프트의 화면 캡처

그림 6은 현재 위치를 웹 사이트로 제공하는 것에 대해 서버로부터 경고를 표시한다. 원하는 대로 수락 또는 거부를 선택할 수 있지만, 자체 테스팅 목적 상 수락하려 하기 때문에, JavaScript가 좌표를 얻고 Ajax를 호출하며 결과를 렌더링할 수 있다.

"GPS not supported" 오류가 표시되면, Microsoft® Internet Explorer®와 같은 웹킷이 아닌 브라우저를 사용하는 중이다. 이 기사를 쓰는 시점에 Internet Explorer는 위치 서비스를 지원하지 않는다.

모두 작동하지만 결과가 표시되지 않는 다면, 20마일의 검색 반경이 너무 작을 수 있다. 반경을 2000으로 변경하기만 하면, 일부 결과가 표시되기 시작해야 한다. 당연히 위치와 동일한 대륙에서 데이터베이스에 일부 데이터를 놓는다고 가정한다.

이 기사의 최종 단계는 반경 제어를 가지기 위해 이를 업그레이드하는 것이다.


사용자 인터페이스 강화하기

반경 제어를 페이지에 추가하려면 지원하려는 각 반경 값에 옵션으로 해당 페이지에 <select> 태그를 추가한다. 그 다음에 일부 jQuery 코드를 추가하여 반경 제어 값을 모니터하고 목록 5와 같이 페이지를 업데이트한다.


목록 5. index2.php

<html>
<head>
<script src="jquery-1.6.1.min.js"></script>
<script>
var startLan = null;
var startLon = null;
$(document).ready(function() {
  $('#radius').change( function() {
    loadArticles( startLan, startLon );
  } );
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
  } else {
    alert('GPS not supported');
  }
});

function successCallback(position) {
  loadArticles( position.coords.latitude, position.coords.longitude );
}

function loadArticles( lat, lon ) {
  startLan = lat;
  startLon = lon;
  $.ajax({
    url: "find.php",
    dataType: 'xml',
    data: {
    lat:lat,
    lon:lon,
    radius:$('#radius').val()
    },
    success: buildArticlePage
  });
}

function buildArticlePage( data ) {
  $('#output').empty();
  $(data).find("article").each(function() {
  var title = $(this).find("title").text();
  var summary = $(this).find("summary").text();
  var url = $(this).find("url").text();
  var address = $(this).find("address").text();
    $("#output").append( "<a target=\"_blank\" href=\""+url+"\">"+title+"</a><br/>");
    $("#output").append( "<i>"+address+"</i><br />");
    $("#output").append( summary+"<br /><br />");
  });
}

function errorCallback(error) {
  alert('Error getting GPS:'+error);
}
</script>
</head>
<body>
<select id="radius">
  <option value="5" selected>5</option>
  <option value="15">15</option>
  <option value="50">50</option>
  <option value="150">150</option>
</select>
<div id="output">
</div>
</body> 
</html>

목록 5에서 변경은 변경 청취자를 반경 제어로 추가하는 페이지의 바로 맨 위에서 시작한다. 그 다음에 이 코드는 제어가 변경될 때 loadArticles 함수를 호출한다. 코드를 더 간단하게 만들기 위해 loadArticles 메소드는 최종 위치를 저장하므로 반경이 변경될 때 재사용될 수 있다. 페이지의 HTML 섹션도 <select> 태그와 반경 옵션을 추가하도록 업데이트된다.

향상판을 테스트하려면 먼저 서버에서 index2.html로 업데이트된 웹 페이지를 설치한 다음 웹 브라우저에서 이를 탐색한다. 그림 7과 유사한 화면이 표시되어야 한다.


그림 7. 반경 제어를 통한 현재 검색 페이지
검색 반경을 제어하는 드롭 다운 필드가 있는 기사의 목록의 화면 캡처

그림 7은 페이지 맨 위에 새 반경 드롭 다운 제어와 함께 기사 목록을 보여준다. 이 반경 제어를 동적으로 변경하면 업데이트된 반경 값으로 Ajax 요청을 다시 실행하여 페이지를 다시 빌드한다. 그 다음에 이는 output <div> 태그를 비우고 찾은 기사의 새 세트를 추가한다. 그림 8의 경우에 필자는 값을 150으로 변경했다.


그림 8. 150마일에 대한 검색 결과
150마일 반경 내에서 검색 결과의 화면 캡처

페이지의 맨 아래 추가된 그림 8의 몇 가지 추가 결과를 확인할 수 있다.

결론

FourSquare, Yelp 및 Google Maps와 같은 위치 기반 서비스는 사람들이 현지 지역에서 훌륭한 사항들을 알려고 하고 이를 중심으로 사람들과 연결하려고 하기 때문에 대중적이다. 이 새 위치 API, 약간의 PHP, 일부 jQuery JavaScript, 약간의 XML 및 웹 브라우저에서 일부 위치 지원 등을 통해 스스로 위치 사용 웹 애플리케이션을 보유한다. 이러한 코드를 시작 지점으로 사용하여 자체 데이터 모델로 자체 위치 기반 서비스를 빌드할 수 있다. 그리고 독자의 애플리케이션이 클라이언트로부터 위치 데이터의 지속적인 피드를 요청하는 경우, 위치정보 서비스도 이에 대해 허용하며, 이는 심지어 한층 더 높은 수준의 가능성을 연다.


참고자료

교육

  • Yahoo! PlaceFinder 서비스: 주소를 위도/경도 좌표 쌍으로 변환한다.

  • Geocoding(Wikipedia): 지역코딩(geocoding)에 대한 훌륭한 페이지를 방문해보자. 이는 주소를 위도와 경도 쌍으로 변환하는 프로세스이다.

  • W3C Geolocation API Specification(Editor's Draft, 2010년 2월): 브라우저에서 위치정보 서비스에 대한 이러한 스펙을 확인하자.

  • jQuery 라이브러리: 모든 기능과 모든 사용 가능한 확장을 문서화하는 이 탁월한 웹 사이트를 방문하자.

  • PHP 사이트: 사용 가능한 PHP에 대한 최고의 참조 자료를 살펴보자.

  • W3C: 표준에 대한 훌륭한 사이트를 알아보자. 특히 XML 표준은 이 기사와도 관련된다.

  • 필자의 더 많은 기사(Jack Herrington저, developerWorks, 2005년 3월 - 현재): Ajax, JSON, PHP, XML 및 다른 기술에 대한 기사를 읽어보자.

  • XML 입문 XML을 배우는 데 필요한 참고자료를 얻자.

  • developerWorks의 XML 영역: XML 분야의 기술을 향상시키는 데 도움이 되는 참고자료를 얻을 수 있다. XML 기술 자료에서 다양한 기술 관련 기사와 팁, 튜토리얼, 표준 및 IBM Redbook을 볼 수 있다.

  • IBM XML 인증: XML 및 관련 기술에 대한 IBM 인증 개발자가 되는 방법을 찾아볼 수 있다.

  • developerWorks 기술 행사 및 웹 캐스트: 이러한 세션에 참가하여 최신 기술에 대한 정보를 얻을 수 있다.

  • Twitter의 developerWorks 페이지: 오늘 가입하여 developerWorks 트윗을 팔로우하자.

  • developerWorks podcasts: 소프트웨어 개발자의 흥미로운 인터뷰와 토론을 확인할 수 있다.

  • developerWorks on-demand demos: 입문자를 위한 제품 설치 및 설정 과정에서 숙련된 개발자를 위한 고급 기능의 활용에 이르기까지 다양한 데모를 제공한다.

제품 및 기술

토론

  • XML 영역 토론 포럼: 여러 XML 관련 토론에 참여해 볼 수 있다.

  • developerWorks 커뮤니티: 개발자가 운영하고 있는 블로그, 포럼, 그룹 및 위키를 살펴보면서 다른 developerWorks 사용자와 의견을 나눌 수 있다.

필자소개

Jack D. Herrington은 20년 경력의 소프트웨어 엔지니어이다. Code Generation in Action, Podcasting Hacks, PHP Hacks(출간 예정)의 저자이기도 하다. 30개 이상의 기술자료도 집필했다. (jack_d_herrington@codegeneration.net)

잘못된 도움말 신고

부정사용 신고

감사합니다. 이 항목은 운영자가 관심을 표시했습니다.


잘못된 도움말 신고

부정사용 신고

제출실패 신고. 나중에 다시 실행해주세요.


디벨로퍼웍스 로그인


IBM ID가 필요하세요?
IBM ID를 잊으셨습니까?


비밀번호를 잊으셨습니까?
비밀번호 변경

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관.

 


developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

화면상에 보여지는 닉네임을 정하세요.

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

3개의 &이나 대쉬를 포함해주시고 31글자내로 제한해주세요.


developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관.

 


아티클 순위

의견

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=20
Zone=XML, 오픈 소스, 웹 개발
ArticleID=768770
ArticleTitle=GPS 사용 웹 애플리케이션 작성
publish-date=11012011

태그

Help
검색 필드를 사용하여 My developerWorks 내에서 해당 태그가 사용된 모든 종류의 컨텐츠를 검색하십시오.

태그를 더 많이 보거나 적게 보기 위해 슬라이더 막대를 사용하십시오.

인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다.

내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.

검색 필드를 사용하여 My developerWorks 내에서 해당 태그가 사용된 모든 종류의 컨텐츠를 검색하십시오. 인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다. 내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.