<jQuery> 6. MAP
by BFine반응형
1. Loaction
getCurrentPosition() --> 위치정보 반환 x: 위도(latitude) y: 경도( position.coords.longitude)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script> $(document).ready(function(){ $("input:button").on("click",function(){ navigator.geolocation.getCurrentPosition(suc, err); }); }); function suc(p){ var x =p.coords.latitude; var y =p.coords.longitude; $("#lo1").html("위도 : "+x+" 경도 :"+y); } function err(e){ $("#lo1").html(e.code+" "+e.message); } </script> </head> <body> <input type="button" value="위치"> <div id="lo1"></div> | cs |
2. Loading
서비스-> 구글맵 -> key api ->값 제공 -> html src
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script > $(document).ready(function(){ var watch; $("#start1").on("click",function(){ watch=navigator.geolocation.watchPosition(successCallback, errorCallback, {enableHighAccuracy:true, maximumAge:0}); //주기적인 출력 }); // 지속적으로 위치정보 출력 // options 최대한 정확하게, 최신정보(숫자가 커질수록 느려짐) $("#stop1").on("click",function(){ navigator.geolocation.clearWatch(watch); $("#result1").html("종료"); }); }); function successCallback(p/*위치저장객체*/){ var x =p.coords.latitude; var y =p.coords.longitude; $("#result1").html("위도 : "+x+" 경도 :"+y); var center = new google.maps.LatLng(x,y);//위도와 경도를 하나의 객체로 var map1=new google.maps.Map(document.getElementById("map")/*맵 보여줄 곳의 태그,jquery불가*/ ,{mapTypeId:google.maps.MapTypeId.ROADMAP, zoom:17/*15 구 10 시 5 대륙*/, center:center/*내위치를 중심으로*/} ); var mark=new google.maps.Marker({position:center,title:"현위치",map:map1});// 현위치 표시 } function errorCallback(e){ $("#result1").html(e.code+" "+e.message); } </script> </head> <body> <button id="start1"> 위치확인</button> <button id="stop1"> 취소 </button> <div id="result1" > </div> <div id='map' style="width: 500px; height: 500px"> Loading</div> </body> </html> | cs |
반응형
블로그의 정보
57개월 BackEnd
BFine