You will be fine

<jQuery> 6. MAP

by BFine

공부(2018~2019) - 스킨변경전/Javascript

반응형

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

반응형

'공부(2018~2019) - 스킨변경전 > Javascript' 카테고리의 다른 글

<Javascript> 10. Promise  (0) 2019.05.27
<jQuery> 7. Ajax  (0) 2018.04.25
<jQuery> 5. Event object  (0) 2018.04.11
<jQuery> 4. Selector, Event  (0) 2018.04.10
<Javascript> 9. Event, 정규표현식  (0) 2018.04.09

블로그의 정보

57개월 BackEnd

BFine

활동하기

티스토리툴바