Version 3.7야후! 지도 AJAX API
야후! 지도 AJAX API를 이용하여 여러분 만의 지도를 웹페이지와 웹어플리케이션에 붙여 보세요. 이 페이지는 야후! AJAX API를 이용하여 지도 서비스를 개발하는데 필요한 정보를 담고 있습니다. 이 페이지는 아래와 같은 내용으로 구성되어 있습니다.
- 야후! 지도에 대한 소개 와 필요한 준비들
- 웹페이지에 지도 추가
- 지도상에 콘트롤 추가
- YLog를 이용한 쉬운 디버깅
- 지도상에 지점(Marker) 추가
- 지도상에 선(Poly line) 그리기
- 지점에 SmartWindow 추가
- 여러개의 사용자 정의 지점 추가
- YGeoPoint에 사용자 정의 오브젝트 추가
- YCoordPoint에 사용자 정의 오브젝트 추가
- YPolyLine 사용
- Y지도 중심으로 부터 반경을 이용하여 최적의 확대 축소 레벨 구하기
- 지도콘트롤 위치 변경하기
- 지점의 아이콘 이미지를 변경하기
- YMapTypeControl 클래스를 이용하여 지도 유형 콘트롤 위치 조정
- 그밖의 기능들
- 제약사항
- 이용 약관
- 개발자 지원 및 개발자 커뮤니티
AJAX API의 Class와 Methods에 대한 대한 상세한 설명을 원하시면 지도 API 클래스 참조 문서를 확인하시기 바랍니다.
야후! 지도에 대한 소개 와 필요한 준비들
야후! AJAX 지도 API는 개발자에게 DHTML과 JavaScript를 이용하여 자신의 웹 페이지에 지도를 사용할 수 있게 합니다. 지도는 JavaScript 소스를 사용하여, 개발하거나 제어할 수 있습니다. 야후 지도 API의 서비스 영역은 전세계를 대상으로 하며, 한국 약 30만개, 전세계 약 230만개의 지역에 대하여 좌표를 지정할 수 있는 서비스를 제공합니다.
야후! AJAX 지도 API를 사용하려면 Firefox 2, Internet Explore 6혹은 7, Opera 8 또는 Safari 3 등의 호환 가능한 웹 브라우저가 필요하며, 야후! 지도는 위 브라우저의 최신버전을 지원합니다. 그리고 나열한 브라우저의 최신버전도 지원합니다. 개발자 여러분들은 자신이 선호하는 개발환경(편집기, IDE)등을 이용하여 개발하실 수 있습니다.
야후! 지도 AJAX API를 사용하기 위해서는 야후! 코리아에서 발급하는 지도API키(Key)를 발급 받으셔야 합니다. 지도 API키 신청/확인하기
야후! 지도를 사용하실 때는 최상의 결과를 위해, 되도록 웹 서버에서 페이지를 실행하도록 권장합니다. 하지만 개발자 여러분들의 개발용 컴퓨터의 하드디스크에서 실행하실 수도 있습니다. 개발용 컴퓨터에서 실행하시려면 Internet Explore에서 보안 설정을 낮추거나, Firefox 에서 Universal Browser Read 속성을 변경하시면 됩니다. 지도 API를 사용하시기 위해서는 반드시 사용자의 컴퓨터가 인터넷에 연결되어 있어야 합니다.
웹페이지에 지도 추가
야후! 지도 AJAX API를 사용하려면, 지도를 추가할 웹 페이지에 야후! 지도 AJAX API의 라이브러리가 포함되어야 합니다. 아래의 예제는 야후! 지도를 포함하는 예제입니다. 예제에서 사용된 지도 API 키(Key), ‘YahooDemo’는 예제로만 사용되는 API키입니다. 따라서 야후! 지도를 사용하시려면 반드시 새로운 API키를 발급 받으셔야 합니다. 지도 API키 신청/확인하기
<html> <head> <script type="text/javascript" src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"> </script> </head> <body> ... ... </body> </html>
지도를 사용하려면, 적어도 1개의 div 태그를 지도가 표시될 영역에 추가하여야 합니다. 아래의 예제에서는 “map”이라는 태그를 사용하였습니다. 기본적으로 지도는 div 컨테이너 태그의 크기에 맞추어 집니다. 따라서 반드시 지도가 표시될 컨테이너 div 태그의 가로, 세로 크기가 style을 이용하여 지정되어야 합니다.
<html>
<head>
<script type="text/javascript"
src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo">
</script>
<style type="text/css">
#map{
height: 75%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
...
</body>
</html>
이제 지도를 화면에 표시할 모든 준비를 마쳤습니다. 지도상에 위치를 표시하려면, 경도와 위도를 포함한 좌표로 지정하거나, 내장된 지오코더 기능을 이용하여 특정 지역명으로 위치를 지정할 수도 있습니다. 내장된 지오코더는 요청된 지역명과 가장 유사한 지역의 좌표를 되돌려 줍니다. 지오코더에 관련된 설명은 [좌표-지명 변환 문서]를 참조하시기 바랍니다.
선택된 지역을 표시하려면, 위도/경도 좌표를 저장하는 오브젝트와 지도 오브젝트를 생성하고 마지막으로 drawZoomAndCenter 함수에 위도/경도 오브젝트를 전달합니다.
<html>
<head>
<script type="text/javascript"
src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"></script>
<style type="text/css">
#map{
height: 75%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create a map object
var map = new YMap(document.getElementById('map'));
// Add map type control
map.addTypeControl();
// Set map type to either of: YAHOO_MAP_SAT, YAHOO_MAP_HYB, YAHOO_MAP_REG
map.setMapType(YAHOO_MAP_SAT);
// Display the map centered on a geocoded location
map.drawZoomAndCenter("San Francisco", 3);
</script>
</body>
</html>
지도상에 콘트롤 추가
야후! 지도에는 지도상에서 사용할 수 있는 다양한 콘트롤이 있습니다. 모든 콘트롤은 지도 API의 메서드를 호출함으로써 켜고 끌 수 있습니다.
<html>
<head>
<script type="text/javascript"
src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"></script>
<style type="text/css">
#map{
height: 75%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create a map object
var map = new YMap(document.getElementById('map'));
// Add map type control
map.addTypeControl();
// Add map zoom (long) control
map.addZoomLong();
// Add the Pan Control
map.addPanControl();
// Set map type to either of: YAHOO_MAP_SAT, YAHOO_MAP_HYB, YAHOO_MAP_REG
map.setMapType(YAHOO_MAP_SAT);
// Display the map centered on a geocoded location
map.drawZoomAndCenter(encodeURIComponent("제주"), 7);
</script>
</body>
</html>
YLog를 이용한 손쉬운 디버깅
야후! 지도 API는 YLog라는 유틸리티 클래스를 포함하고 있습니다. 자바스크립트로 어플리케이션을 개발할 때 YLog를 사용하면 디버깅이나 데이터확인을 하는데 유용합니다.
아래의 예제는 이전에 작성한 코드를 일부 수정하여 window.onLoad 이벤트를 이용, 지도를 초기화 시키고, YLog를 이용하는 예제입니다.
<html>
<head>
<script type="text/javascript"
src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"></script>
<style type="text/css">
#map{
height: 75%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create a Map that will be placed in the "map" div.
var map = new YMap(document.getElementById('map'));
function startMap(){
// Add the ability to change between Sat, Hybrid, and Regular Maps
map.addTypeControl();
// Add the zoom control. Long specifies a Slider versus a "+" and "-" zoom control
map.addZoomLong();
// Add the Pan control to have North, South, East and West directional control
map.addPanControl();
// Specifying the Map starting location and zoom level
map.drawZoomAndCenter("San Francisco", 3);
// Add an event to report to our Logger
YEvent.Capture(map, EventsList.MouseClick, reportPosition);
function reportPosition(_e, _c){
// It is optional to specify the location of the Logger.
// Do so by sending a YCoordPoint to the initPos function.
var mapCoordCenter = map.convertLatLonXY(map.getCenterLatLon());
YLog.initPos(mapCoordCenter); //call initPos to set the starting location
// Printing to the Logger
YLog.print("You Made a MouseClick!");
YLog.print("Latitude:" + _c.Lat);
YLog.print("Longitude:" + _c.Lon);
}
}
window.onload = startMap;
</script>
</body>
</html>
지도상에 지점(Marker) 추가
야후! 지도 API에서 지점을 Marker라고 합니다. 지도상에 표시할 수 있는 지점은 크게 일반 지점과 SmartWindow를 가진 지점 두 가지가 있습니다. 아래의 예제는 지도에 일반 지점을 추가하는 예제입니다.
지도에 일반지점을 추가하기 위해서는 다음의 두 가지 과정을 거쳐야 합니다. 우선, 지점을 추가하고 싶은 위치에 YGeoPoint 오브젝트를 생성합니다. 다음으로 addMarker 함수를 호출하여 지점을 등록합니다. SmartWindow를 가진 지점을 생성하려면 YMarker 오브젝트를 생성한 후에 addOverlay 함수를 사용하여 지도에 등록하면 됩니다.
지점은 제목, SmartWindow중 둘 중에 하나 혹은 둘 다를 가질 수 있습니다. SmartWindow는 사용자가 지점을 선택하면 작은 풍선 모양으로 나타나는 창을 말합니다. 모든 지점(marker)은 JavaScript의 array형태로 저장되고 재사용될 수 있습니다.
지점의 라벨이나 스마트윈도우 내부에 HTML을 사용할 수 있습니다.
<html>
<head>
<script type="text/javascript"
src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"></script>
<style type="text/css">
#map{
height: 75%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create a Map that will be placed in the "map" div.
var map = new YMap(document.getElementById('map'));
function startMap(){
// Add the ability to change between Sat, Hybrid, and Regular Maps
map.addTypeControl();
// Add the zoom control. Long specifies a Slider versus a "+" and "-" zoom control
map.addZoomLong();
// Add the Pan control to have North, South, East and West directional control
map.addPanControl();
// Specifying the Map starting location and zoom level
map.drawZoomAndCenter("San Francisco", 3);
// Add an event to report to our Logger
YEvent.Capture(map, EventsList.MouseClick, reportPosition);
function reportPosition(_e, _c){
// It is optional to specify the location of the Logger.
// Do so by sending a YCoordPoint to the initPos function.
var mapCoordCenter = map.convertLatLonXY(map.getCenterLatLon());
YLog.initPos(mapCoordCenter); //call initPos to set the starting location
// Printing to the Logger
YLog.print("You Made a MouseClick!");
YLog.print("Latitude:" + _c.Lat);
YLog.print("Longitude:" + _c.Lon);
YLog.print("Adding marker at....");
YLog.print("\nLatitude:" + _c.Lat + "\nLongitude:" + _c.Lon);
var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon );
map.addMarker(currentGeoPoint);
}
}
window.onload = startMap;
</script>
</body>
</html>
지도상에 선(Poly line) 그리기
야후! 지도 API에서 여러 개의 YGeoPoint를 가지는 YPolyLine 오브젝트를 이용하여 여러 지점을 연결하는 선을 그릴 수 있습니다. 배열을 생성한 후 YGeoPoint를 해당 array에 추가합니다. 이 배열을 YGeoPoint 오브젝트에 전달한 후 addOverlay 함수를 이용하여 지도상에 표시할 수 있습니다.
선이 그려질 수 있는 지를 점검하는데 유용한 함수는 아래의 예제 끝부분에서 확인하실 수 있습니다.
<html>
<head>
<script type="text/javascript"
src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"></script>
<style type="text/css">
#map{
height: 75%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create a Map that will be placed in the "map" div.
var map = new YMap(document.getElementById('map'));
// Create an array to contain the points of our polyline
polylinePoints = [];
function startMap(){
// Add the ability to change between Sat, Hybrid, and Regular Maps
map.addTypeControl();
// Add the zoom control. Long specifies a Slider versus a "+" and "-" zoom control
map.addZoomLong();
// Add the Pan control to have North, South, East and West directional control
map.addPanControl();
// Specifying the Map starting location and zoom level
map.drawZoomAndCenter("seoul", 3);
// Add an event to report to our Logger
YEvent.Capture(map, EventsList.MouseClick, myCallback);
function myCallback(_e, _c){
// It is optional to specify the location of the Logger.
// Do so by sending a YCoordPoint to the initPos function.
var mapCoordCenter = map.convertLatLonXY(map.getCenterLatLon());
YLog.initPos(mapCoordCenter); //call initPos to set the starting location
// Printing to the Logger
YLog.print("You Made a MouseClick!");
YLog.print("Latitude:" + _c.Lat);
YLog.print("Longitude:" + _c.Lon);
// Printing to the Logger
YLog.print("Adding marker at....");
YLog.print("\nLatitude:" + _c.Lat + "\nLongitude:" + _c.Lon);
var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon );
map.addMarker(currentGeoPoint)
// Draw our Polylines
polylinePoints.push(currentGeoPoint);
if (canDisplayPolyLines){
map.addOverlay(new YPolyline(polylinePoints, 'black',7,0.7));
YLog.print("Polyline added lines");
}
}
this.canDisplayPolyLines = function (){
return (polylinePoints.length > 1);
}
}
window.onload = startMap;
</script>
</body>
</html>
지점에 SmartWindow 추가
지도상에 사용자의 마우스 클릭에 반응하는 SmartWindow를 가지는 지점을 추가할 수 있습니다. 마우스 클릭 등의 사용자 이벤트가 발생할 때. YMarker에 포함된 openSmartWindow 함수를 이용할 수 있고, addAutoExpend 함수를 이용하여 마우스 커서가 지점위로 올라 갔을 때 특정 내용을 보여줄 수 있습니다.
<html>
<head>
<script type="text/javascript"
src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"></script>
<style type="text/css">
#map{
height: 75%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create a Map that will be placed in the "map" div.
var map = new YMap(document.getElementById('map'));
// Create an array to contain the points of our polyline
polylinePoints = [];
function startMap(){
// Add the ability to change between Sat, Hybrid, and Regular Maps
map.addTypeControl();
// Add the zoom control. Long specifies a Slider versus a "+" and "-" zoom control
map.addZoomLong();
// Add the Pan control to have North, South, East and West directional control
map.addPanControl();
// Specifying the Map starting location and zoom level
map.drawZoomAndCenter("San Francisco", 3);
// Add an event to report to our Logger
YEvent.Capture(map, EventsList.MouseClick, myCallback);
function myCallback(_e, _c){
/*
It is optional to specify the location of the Logger.
Do so by sending a YCoordPoint to the initPos function.
*/
var mapCoordCenter = map.convertLatLonXY(map.getCenterLatLon());
YLog.initPos(mapCoordCenter); //call initPos to set the starting location
currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon);
placeMarker(currentGeoPoint);
displayPolyLines(currentGeoPoint);
}
function placeMarker(geoPoint){
// Printing to the Logger
YLog.print("Adding marker at....");
YLog.print("\nLatitude:" + geoPoint.Lat + "\nLongitude:" + geoPoint.Lon);
var newMarker= new YMarker(geoPoint);
newMarker.addAutoExpand("이렇게 마커에 라벨을 추가 합니다.");
var markerMarkup = "<b>이렇게<i>HTML 태그를</i>추가 할 수 있습니다.</b>";
YEvent.Capture(newMarker, EventsList.MouseClick,
function(){
newMarker.openSmartWindow(markerMarkup);
});
map.addOverlay(newMarker);
}
function displayPolyLines(g_point){
polylinePoints.push(g_point);
if (canDisplayPolyLines){
map.addOverlay(new YPolyline(polylinePoints, 'black',7,0.7));
YLog.print("Polyline added lines");
}
}
this.canDisplayPolyLines = function() {
// Check to make sure we have at least 2 points to connect
return (polylinePoints.length > 1);
}
}
window.onload = startMap;
</script>
</body>
</html>
여러 개의 사용자 정의 지점 추가
지도 API에 포함된 YImage 오브젝트를 이용하면, 사용자가 원하는 이미지로 특정 YGeoPoint에 지점을 등록할 수 있습니다. createCustomMarkerIamge 함수를 이용하여 생성하고 원하는 지점 이미지를 YMarker의 생성자에서 추가하면 됩니다. 이렇게 하면 YMarker는 기본 이미지 대신에 사용자가 정의한 이미지를 심볼로 사용하게 됩니다.
<html>
<head>
<script type="text/javascript"
src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"></script>
<style type="text/css">
#map{
height: 75%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create a Map that will be placed in the "map" div.
var map = new YMap(document.getElementById('map'));
// Create an array to contain the points of our polyline
polylinePoints = [];
function startMap(){
// Add the ability to change between Sat, Hybrid, and Regular Maps
map.addTypeControl();
// Add the zoom control. Long specifies a Slider versus a "+" and "-" zoom control
map.addZoomLong();
// Add the Pan control to have North, South, East and West directional control
map.addPanControl();
// Specifying the Map starting location and zoom level
map.drawZoomAndCenter("San Francisco", 3);
// Add an event to report to our Logger
YEvent.Capture(map, EventsList.MouseClick, myCallback);
function myCallback(_e, _c){
/*
It is optional to specify the location of the Logger.
Do so by sending a YCoordPoint to the initPos function.
*/
var mapCoordCenter = map.convertLatLonXY(map.getCenterLatLon());
YLog.initPos(mapCoordCenter); //call initPos to set the starting location
currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon);
placeMarker(currentGeoPoint);
displayPolyLines(currentGeoPoint);
}
function placeMarker(geoPoint){
// Printing to the Logger
YLog.print("Adding marker at....");
YLog.print("\nLatitude:" + geoPoint.Lat + "\nLongitude:" + geoPoint.Lon);
var newMarker= new YMarker(geoPoint, createCustomMarkerImage());
newMarker.addAutoExpand("이렇게 마커에 라벨을 추가 합니다.");
var markerMarkup = "<b>이렇게<i>HTML 태그를</i>추가 할 수 있습니다.</b>";
YEvent.Capture(newMarker, EventsList.MouseClick,
function(){
newMarker.openSmartWindow(markerMarkup);
});
map.addOverlay(newMarker);
}
function createCustomMarkerImage(){
var myImage = new YImage();
myImage.src = 'http://us.i1.yimg.com/us.yimg.com/i/us/map/gr/mt_ic_c.gif';
myImage.size = new YSize(20,20);
myImage.offsetSmartWindow = new YCoordPoint(0,0);
return myImage;
}
function displayPolyLines(g_point){
polylinePoints.push(g_point);
if (canDisplayPolyLines){
map.addOverlay(new YPolyline(polylinePoints, 'black',7,0.7));
YLog.print("Polyline added lines");
}
}
this.canDisplayPolyLines = function() {
// Check to make sure we have at least 2 points to connect
return (polylinePoints.length > 1);
}
}
window.onload = startMap;
</script>
</body>
</html>
YGeoPoint에 사용자 정의 오브젝트 추가
지도의 위경도 좌표 (YGeoPoint)상에 사용자 정의 오브젝트를 추가할 수 있습니다.
<html>
<head>
<title>Yahoo! Maps Simple Example</title>
<script src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"
type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
YLog.initPos(new YCoordPoint(650,40));
YLog.initSize(new YSize(200,200));
function StartYMap() {
var map = new YMap(document.getElementById('ymap'),YAHOO_MAP_SAT);
var paris = new YGeoPoint(48.860001,2.34);
map.drawZoomAndCenter(paris,5);
map.addZoomLong();
map.addTypeControl();
map.setMapType(YAHOO_MAP_SAT);
var myFunction = function(_e,_c) {
YLog.print(_c);
};
YEvent.Capture(map,EventsList.MouseClick,myFunction);
// custom object handling
var hd = YUtility.createNode('div','sub');
var hs = {
backgroundColor: 'yellow',
position:'absolute',
overflow:'visible',
bottom:-5,
right:-5,
width:10,
height:10
};
YUtility.setStyle(hd,hs);
var ob = YUtility.createNode('div','main');
var os = {
zIndex:2,
width:100,
height:100,
borderColor:'red',
borderStyle:'solid',
borderWidth:2
};
YUtility.setStyle(ob,os);
YUtility.appendNode(ob,hd);
var _ex = new YUtility.containerResize("main", "sub");
//default container returned div; append your own to this default
var mo = new YCustomOverlay(paris);
YUtility.appendNode(mo,ob);
map.addOverlay(mo);
}
window.onload = StartYMap;
</script>
</head>
<body>
<div id="ymap" style="width: 70%; height: 90%; left:10px; top:30px"></div>
</body>
</html>
YCoordPoint에 사용자 정의 오브젝트 추가
지도 영역상의 좌 상단으로부터 시작하는 픽셀좌표 (YCoordPoint)상에 사용자 정의 오브젝트를 추가할 수 있습니다.
<html>
<head>
<title>Yahoo! Maps Simple Example</title>
<script src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"
type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
YLog.initPos(new YCoordPoint(650,40));
YLog.initSize(new YSize(200,200));
function StartYMap() {
var map = new YMap(document.getElementById('ymap'),YAHOO_MAP_SAT);
var paris = new YGeoPoint(48.860001,2.34);
map.drawZoomAndCenter(paris,5);
map.addZoomLong();
map.addTypeControl();
map.setMapType(YAHOO_MAP_SAT);
var myF = function(_e,_c) {
//YLog.print(_c);
};
YEvent.Capture(map,EventsList.MouseClick,myF);
// adjust opacity
var hd = YUtility.createNode('div','sub');
var hs = {
backgroundColor: 'yellow',
position:'absolute',
overflow:'visible',
bottom:-5,
right:-5,
width:20,
height:20
};
YUtility.setStyle(hd,hs);
var ob = YUtility.createNode('div','main');
var os = {
zIndex:2,
width:100,
height:100,
borderColor:'blue',
borderStyle:'solid',
borderWidth:10
};
YUtility.setStyle(ob,os);
YUtility.appendNode(ob,hd);
var _ex = new YUtility.containerResize("main", "sub");
var myc = new YCoordPoint(200,30);
var mo = new YCustomOverlay(myc,ob);
map.addOverlay(mo);
}
window.onload = StartYMap;
</script>
</head>
<body>
<div id="ymap" style="width: 70%; height: 90%; left:10px; top:30px"></div>
</body>
</html>
YPolyLine 사용
YPolyLine class를 이용하여 사용자 정의 라인을 그릴 수 있습니다. 아래의 예제는 지도 이동, 확대 축소 콘트롤의 위치를 YCoordPoint를 이용하여 재조정하는 기능도 포함되어 있습니다.
<html>
<head>
<title>Yahoo! Maps Example</title>
<script src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"
type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
YLog.initSize(new YSize(600,300));
function StartYMap() {
var map = new YMap(document.getElementById('ymap'),YAHOO_MAP_REG);
var cPT = new YGeoPoint(37.4041960114344,-122.008194923401);
map.drawZoomAndCenter(cPT,9);
map.addTypeControl();
var zp = new YCoordPoint(5,30);
zp.translate('right','bottom');
map.addZoomLong(zp);
var pp = new YCoordPoint(2,5);
pp.translate('right','top');
map.addPanControl(pp);
var cPT2 = new YGeoPoint(37.4341960114344,-122.318194923401);
var cPT3 = new YGeoPoint(37.8341960114344,-122.318194923401);
var cPT4 = new YGeoPoint(37.9341960114344,-122.418194923401);
var cPT5 = new YGeoPoint(37.7341960114344,-122.518194923401);
// args: array of pts, color, width, alpha
var poly1 = new YPolyline([cPT,cPT2,cPT3,cPT4,cPT5],'blue',7,0.7);
map.addOverlay(poly1);
var myF = function(e) {
//YLog.print('poly added');
};
YEvent.Capture(map,EventsList.polylineAdded,myF);
}
window.onload = StartYMap;
</script>
</head>
<body>
<div id="ymap" style="width: 90%; height: 90%; left:10px; top:10px"></div>
</body>
</html>
지도 중심으로부터 반경을 이용하여 최적의 확대 축소 레벨 구하기
지도 중심으로부터 거리가 주어지면, 최적의 지도 확대, 축소 레벨을 계산하여 지도를 표시할 수 있습니다.
지도콘트롤 위치 변경하기
지도이동 아이콘 및 확대 축소 콘트롤은 지도상에서 자유롭게 위치를 변경할 수 있습니다.
지점의 아이콘 이미지 변경하기
등록한 지점의 이미지 아이콘을 변경할수 있습니다.
YMapTypeControl 클래스를 이용하여 지도 유형 콘트롤 위치 조정
YMapTypeControl 클래스를 이용하면 지도에 내장된 지도 유형 콘트롤의 방향과 위치를 조정할 수 있습니다.
그 밖의 기능들
본 문서에서는 야후! AJAX API의 아주 일부분만을 다루고 있습니다. 다음은 API를 이용하여 구현 가능한 기타 기능들의 목록입니다.
- removeMarker, removeZoomControl, removePanControl 메소드를 이용하여 오버레이와 툴이 롤오버와 마우스 클릭과 같은 사용자 이벤트에 반응하도록 할 수 있습니다.
- setZoomLevel과 resizeTo 메소드를 이용하여 맵의 크기와 확대 정도를 신속하게 변경할 수 있습니다.
- disableDragMap과 enableDragMap 메소드를 이용하여 마우스로 지도를 움직이는 drag & drop 기능을 활성화시키거나 비활성화시킵니다.
- panToLatLon과 panToXY의 타이밍 파라미터를 이용하여 느리게(혹은 빠르게) 새로운 맵 지역으로 이동할 수 있습니다.
API의 클래스 및 메소드에 대한 상세한 설명은 지도 API 클래스 참조 문서를 참조하십시오.
제약사항
야후! AJAX Maps API는 한 IP당 1일 50,000회의 질의로 제한되어 있습니다.
이용 약관
야후! 지도API의 이용 약관은 아래 링크에서 확인하실 수 있습니다.
개발자 지원 및 개발자 커뮤니티
야후! 지도를 사용하면서 발생하는 문제 및 개발 지원 요청은 아래 링크로 문의 주시면, 최대한 빨리 연락 드리도록 하겠습니다.
Copyright © 2008 Yahoo! Korea LLC. All rights reserved.