다음지도 여러개의 인포윈더우 및 이미지 표기하기
Posted by Albert 4111Day 23Hour 16Min 36Sec ago [2014-01-16]
| <!DOCTYPE html> | |
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="initial-scale=0.2, maximum-scale=1.0, minimum-scale=1.0, width=device-width, user-scalable=no"> | |
| <title> 피턴에듀케이션 Ipang </title> | |
| <link type="text/css" rel="stylesheet" href="/common/css/base.css"> | |
| <link id="webfontLink" type="text/css" rel="stylesheet" href="'none"> | |
| <script type="text/javascript" src="/common/js/jquery-2.0.3.min.js"></script> | |
| <script type="text/javascript" src="/common/js/comm.js"></script> | |
| <script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=07f766ebeaf30151b34429bd76719eddb0517964" charset="utf-8"></script> | |
| </head> | |
| <body onload='geoFindMe();'><script> | |
| var map; | |
| function geoFindMe() { | |
| $(".loading").show(); | |
| var output = document.getElementById("out"); | |
| if (!navigator.geolocation) { | |
| output.innerHTML = "<p>사용자의 브라우저는 지오로케이션을 지원하지 않습니다.</p>"; return; | |
| } | |
| function success(position) { | |
| var latitude = position.coords.latitude; | |
| var longitude = position.coords.longitude; | |
| // var aaa = '<p>위도 : ' + latitude + '° <br>경도 : ' + longitude + '°</p>'; var img = new Image(); img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false"; | |
| init(latitude,longitude); | |
| }; | |
| function error() { | |
| output.innerHTML = "사용자의 위치를 찾을 수 없습니다."; | |
| }; | |
| navigator.geolocation.getCurrentPosition(success, error); | |
| } | |
| function init(latitude,longitude) { | |
| if (latitude!="" && longitude!="") { | |
| // 함수로 부터 받아온 좌표값 사용 | |
| } else { | |
| //-- 현재위치를 알 수 없을때 피턴을 중심으로 찾는다. | |
| latitude = '37.54135805273453'; | |
| longitude = '127.05564406262074'; | |
| } | |
| // alert(latitude); | |
| // alert(longitude); | |
| map = new daum.maps.Map(document.getElementById('map'), { | |
| center: new daum.maps.LatLng(latitude, longitude), | |
| level: 4 | |
| }); | |
| var points = [ | |
| new daum.maps.LatLng(37.538779843072824,127.00200500605618), | |
| new daum.maps.LatLng(37.538635699652154,127.00030778301571), | |
| new daum.maps.LatLng(37.537338259427315,126.9998325645435), | |
| new daum.maps.LatLng(37.53377026138633,127.00288736856231), | |
| new daum.maps.LatLng(37.534941239454476,127.00920075758009) | |
| ]; | |
| var icon = new daum.maps.MarkerImage( | |
| 'http://localimg.daum-img.net/localimages/07/2009/map/icon/blog_icon01_on.png', | |
| new daum.maps.Size(31, 34), | |
| new daum.maps.Point(16,34), | |
| "poly", | |
| "1,20,1,9,5,2,10,0,21,0,27,3,30,9,30,20,17,33,14,33" | |
| ); | |
| for(var i = 0; i < points.length; i++) | |
| { | |
| var marker = new daum.maps.Marker({ | |
| position: points[i], | |
| image: icon | |
| }); | |
| marker.setMap(map); | |
| //인포 윈도우 | |
| daum.maps.event.addListener(marker, 'click', (function(marker, i) { | |
| return function() { | |
| var infowindow = new daum.maps.InfoWindow({ | |
| content: '<p style="margin:7px 22px 7px 12px;font:12px/1.5 sans-serif">zzzz</p>', | |
| removable : true | |
| }); | |
| infowindow.open(map, marker); | |
| } | |
| })(marker, i)); | |
| } | |
| $(".loading").hide(); | |
| } | |
| </script> | |
| <header> | |
| </header> | |
| <!-- content --> | |
| <!-- APP Area --> | |
| <section class="appSpace"> | |
| <div class="mapBox"> | |
| <div class="mapApiLoad" id="map"> | |
| <img src="/common/images/ajax-loader .gif" alt="" class="loading" > | |
| </div> | |
| </div> | |
| </section> | |
| <!-- //APP Area --> | |
| <!-- //content --> | |
| <footer> | |
| </footer> | |
| </body> | |
| </html> |