¾ßÈÄ ¼¼°è Áöµµ È°¿ëÇϱâ, ¾ßÈÄ °Å±â Áöµµ ¿ÀÇ API ¸Å½Ã¾÷ |
|
|
 |
14³â Àü |
¾ßÈÄ ¼¼°è Áöµµ API ¸¦ È°¿ëÇؼ Áöµµ¸¦ ¸¸µå´Â ºñ±³Àû °£´ÜÇÑ »ùÇÃÀÔ´Ï´Ù. ¾Æ·¡ ¼Ò°³µÈ ¼Ò½º Äڵ带 ½ÇÇàÇϸé 100°³ÀÇ ¸¶Ä¿°¡ »Ñ·ÁÁö°í ÇØ´ç ¸¶Ä¿¸¦ Ŭ¸¯Çϸé À̹ÌÁö¸¦ º¸¿©ÁÖ´Â ´ÙÀ½°ú °°Àº ½ÇÇà ȸéÀ» È®ÀÎÇÒ ¼ö ÀÖ½À´Ï´Ù. ÀÚ½ÅÀÇ È¨ÆäÀÌÁö¿¡¼ Å×½ºÆ® Çϱâ À§Çؼ´Â ¾ßÈÄ °Å±â Áöµµ ¿ÀÇ API Å°¸¦ ÇØ´ç ȨÆäÀÌÁö (http://kr.open.gugi.yahoo.com/Regist/regist.php) ¿¡¼ ¾òÀ» ¼ö ÀÖÀ¸¸ç Å° °ª($yahoo_map_api_key)À» ¾òÀº API Å°·Î ±³Ã¼ÇØ¾ß ÇÕ´Ï´Ù. Âü°í·Î ±¸±Û Áöµµ API¿¡µµ °ü½ÉÀÌ ÀÖ´Â ºÐÀº ¾Õ¼ ¼Ò°³ÇÑ "ÀÚ¹Ù½ºÅ©¸³Æ®·Î Áöµµ ¸¸µé±â, ±¸±Û Áöµµ API ¸Å½Ã¾÷(Mashup)" Æ÷½ºÆ®µµ Âü°íÇϼ¼¿ä.
[½ÇÇà ȸé] http://www.hompydesign.com/map/yahoo.html
[¼Ò½º ÄÚµå]
<HTML>
<HEAD>
<TITLE><?=$hompy_title?></TITLE>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=$yahoo_map_api_key"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:µ¸¿ò,verdana,arial,sans serif;}
.window_image {border:1px solid #cccccc; width:140px; height:100px; margin:6px;}
</style>
<script type='text/javascript'>
<!--
var map = null;
var current_lon = 127.046;
var current_lat = 37.5066;
var current_zoom = 14;
var person_list = [];
$(document).ready(function(){
display_loading();
map = new YMap($("#map_canvas")[0]);
map.addTypeControl();
map.addZoomLong();
map.addPanControl();
//map.drawZoomAndCenter(encodeURIComponent("°³²¿ª"), 4);
map.drawZoomAndCenter(new YGeoPoint(current_lat,current_lon), 4);
map.setMapType(YAHOO_MAP_REG);
display_marker({user:0,lat:current_lat,lon:current_lon});
for (record in person_list) {
display_marker(person_list[record]);
}
setTimeout(display_loaded, 1000);
});
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
function display_marker(record){
with (record) {
var point = new YGeoPoint(Number(lat),Number(lon));
var marker = create_marker(point, user);
}
map.addOverlay(marker);
//map.setCenter(point, current_zoom, G_NORMAL_MAP);
}
function create_marker(point, person) {
var icon = new YImage();
icon.src = 'images/pot.png';;
icon.size = new YSize(36, 36);
icon.offset.x = -18; icon.offset.y = 0;
var marker= new YMarker(point, icon);
//marker.addAutoExpand("pos:"+person);
var html = '<a href="http://hompy.info/583"><img src="/hompydesign.com?seq='+person+'" class="window_image"></a>';
YEvent.Capture(marker, EventsList.MouseClick, function(){
marker.openSmartWindow(html);
});
return marker;
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
-->
</script>
</HEAD>
<BODY>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</BODY>
</HTML> |
|
̵̧ : 357 |
̵̧
¸ñ·Ï
|
|