View
1.318
Download
4
Category
Tags:
Preview:
DESCRIPTION
2009.1.31 야후 매쉬업 캠프 거기 지도 API 활용 - 손경성
Citation preview
YAHOO! Maps API 3.8
Introduction
Y!KR maps engineering
2009 Jan
Yahoo! - published (Slide 2)
Agenda
▐ What is Y!Map API? (5min)
▐ What is Y!Geo API? (5min)
▐ Mash-up examples (5min)
▐ Feature description (10min)
▐ Using proxy and Json Call-Back (5min)
▐ Code examples (10min)
▐ Step by step tutoring (10min)
▐ Exercise (20min)
▐ Q & A (10min)
▐ Coffee break!!
Yahoo! - published (Slide 3)
What is Y!Map API?
Satellite Map
World Map
Easy to use
세계 지도
위성지도
손쉽고 다양한 내/외부API
세계 표준 좌표 계 (WGS84 경위도)
다양한 브라우저 지원 (FireFox, IE, Opera9, Safari3)
오랜 사용자 지원으로 인한 안정성 및 세계적 커뮤니티
Yahoo! - published (Slide 4)
What is Y!Geo API?
버스/지하철 정류장 검색 API
좌표 계 변환 API
POI 검색 API
주소 ↔ 좌표 변환 API (Geocoder)
다양한 출력 방식 (Json, XML, PHP serialize, Json callback)
UTF-8 표준 REST 인코딩 포멧
Yahoo! - published (Slide 5)
Mash-up examples
http://www.oggle.ca/
Yahoo map + Virtual reality mash up
Yahoo map + geography mash up Yahoo map + Memory mash up
Yahoo! - published (Slide 6)
Mash-up examples
http://www.9-interactive.com/
Yahoo map + VML Drawing technique
Yahoo map + people connection
http://www.townkings.com
Yahoo! - published (Slide 7)
Feature description
YPolyline
Geo calculator
Customizable feature
YMarker
YEvent
Wizard
Yahoo! - published (Slide 8)
Using proxy and Json Call-Back
▐ 외부의 데이터를 다루기 위한 “JSON call back”
function mycallback(response){
if(typeof response == "object"){
var hdata=response.ResultSet.head;
if(hdata.Error>0){
alert(hdata.ErrorMessage);
}else{
var location=response.ResultSet.location;
alert("this location is : "+location.country+" "+location.state+" "+location.county+" "+location.town);
}
}else{
alert("api connection error");
}
}
<script src="http://kr.open.gugi.yahoo.com/service/rgc.php?appid=YahooDemo&
latitude=37.511411132213&longitude=127.05925359288&output=json&callback=mycallback"></script>
Yahoo! - published (Slide 9)
Using proxy and Json Call-Back
▐ 외부의 데이터를 다루기 위한 “asyncRequest”
RequestAsnc();
//connection fail control
var handle_RequestAsnc_fail = function(o){
alert("async request was fail");
}
//data handle
var handle_RequestAsnc_success = function(o){
alert("success");
}
//callback define
var callback_RequestAsnc={success: handle_RequestAsnc_success,failure: handle_RequestAsnc_fail};
//origin function
function RequestAsnc(){
var requestUrl="/ymap/sendRequest.php"; //proxy page. ajax has domain restriction.
var postValue="type=xml&utf8=yes&goUrl="+encodeURIComponent(testuri);
var request = YAHOO.util.Connect.asyncRequest('POST', requestUrl, callback_RequestAsnc, postValue);
}
How to avoid “cross domain” policy? Make server side proxy page or apache proxy
Yahoo! - published (Slide 10)
<script type="text/javascript" src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.8&appid=YahooDemo"></script>
Code examples
▐ Map initializing
var map;
function StartYMap()
{
// 지도 오브젝트를 생성 합니다.
map = new YMap(document.getElementById('map'));
// WGS84 좌표계의 경위도 좌표 오브젝트를 전달하여 위치를 지정var center_point = new YGeoPoint(37.511411132213,127.05925359288);
//YGeoPoint or YCoordPoint , ZoomLevel. zoom=1~17
map.drawZoomAndCenter(center_point,1);
}
window.onload = StartYMap;
<body>
<div id="map"></div>
</body>
Yahoo! - published (Slide 11)
Code examples
▐ Using Mercator projections
(example)
LatLon to Pixel XY from equator and date-time line
var px = map.MP.ll_to_pxy(map.getCenterLatLon().Lat , map.getCenterLatLon().Lon);
var x= px.x;
var y=px.y;
Yahoo! - published (Slide 12)
Step by step tutoring
Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기
참고 url : Reverser Geocoder http://kr.open.gugi.yahoo.com/document/geocooder.php
1. 기본 HTML page 만들기
Yahoo! - published (Slide 13)
Step by step tutoring
Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기
1. 기본 HTML page 만들기
<html>
<head>
<style type="text/css">
#map{
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map">
<div style="position:relative;z-index:1;padding-left:80px;padding-top:9px;font-weight:bold;">
<div style="float:left;position:relative;width:120px;">현재의 위치는 : </div>
<div id="indicator" style="float:left;position:relative;width:500px;"></div>
</div>
<div style="width:100%;height:25px;padding:4px;z-index:1;position:absolute;top:0;left:0;
border:1px solid purple;background-color:blue;filter:alpha(opacity=10);opacity : 0.1"></div>
</div>
</body>
</html>
Yahoo! - published (Slide 14)
Step by step tutoring
Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기
2. 지도 API 삽입하기
<html>
<head>
<script type="text/javascript" src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.8&appid=YahooDemo"></script>
<style type="text/css">
#map{
height: 400px;
width: 100%;
}
</style>
<script type="text/javascript">
<!--
var map;
function StartYMap()
{
map = new YMap(document.getElementById('map'));
map.addTypeControl();
map.addZoomLong();
map.addPanControl();
map.setMapType(YAHOO_MAP_REG);
map.drawZoomAndCenter('seoul',9);
}
window.onload = StartYMap;
</head>
Yahoo! - published (Slide 15)
Step by step tutoring
Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기
3. 이벤트 핸들러 지정하기
function StartYMap()
{
map = new YMap(document.getElementById('map'));
map.addTypeControl();
map.addZoomLong();
map.addPanControl();
map.setMapType(YAHOO_MAP_REG);
map.drawZoomAndCenter('seoul',9);
YEvent.Capture(map, EventsList.endMapDraw, whereami);
YEvent.Capture(map, EventsList.endPan, whereami);
YEvent.Capture(map, EventsList.endAutoPan, whereami);
}
function whereami(){
var _c=map.getCenterLatLon(); //중심점 구하기var lat=_c.Lat;
var lon=_c.Lon;
var param="appid=YahooDemo&output=json&callback=printdata&latitude="+lat+"&longitude="+lon;
var myurl="http://kr.open.gugi.yahoo.com/service/rgc.php?"+param;
var rnd = YUtility.getRandomID();
var _id = 'rgc:'+rnd;
YUtility.dynamicSNode(_id,myurl);
}
Yahoo! - published (Slide 16)
Step by step tutoring
Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기
4. 데이터 처리 함수 작성 하기
function printdata(obj){
if(typeof obj=="object"){
var h=obj.ResultSet.head;
if(parseInt(h.Error)>0){
alert(h.ErrorMessage);
}else{
var country=obj.ResultSet.location.country;
var state=obj.ResultSet.location.state;
var county=obj.ResultSet.location.county;
var town=obj.ResultSet.location.town;
if(country!=null){
document.getElementById("indicator").innerHTML =
country+" > "+state+" > "+county+" > "+town;
}
}
}else{
alert("data handle error");
}
}
Yahoo! - published (Slide 17)
Exercise
▐POI 검색 API 사용하기
참고 url : http://kr.open.gugi.yahoo.com/document/poisearch.php
Poisearch.html을 참고하여 지도API를 넣은 후
검색 버튼과 poisearch api를 연동하여 검색후
결과를 Ymarker를 통해 지도위에 표현해 보자
Yahoo! - published (Slide 18)
▐ Q and A
Recommended