利用HTML5定位功能，實現在百度地圖上定位

伽馬科技.攻城師發表於2016-01-20
HTML地圖
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>HTML5定位</title>
 6     <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
 7   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wqBXfIN3HkpM1AHKWujjCdsi"></script>
 8   <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
 9     <style type="text/css">
10     *{ margin: 0px; padding: 0px;}
11   body{text-align: center;  height: 100%;overflow:hidden;}
12   #allmap{ width: 100%;height: 100%; position: absolute;}
13     </style>
14 </head>
15 <body>
16     <div id="allmap"></div>
17 <script type="text/javascript">
18  $(function(){
19      if(supportsGeoLocation()){
20          alert("你的瀏覽器支援 GeoLocation.");
21      }else{
22          alert("不支援 GeoLocation.")
23      }
24   // 檢測瀏覽器是否支援HTML5
25                function supportsGeoLocation(){
26                   return !!navigator.geolocation;
27               }  
28   // 單次位置請求執行的函式             
29                function getLocation(){
30                   navigator.geolocation.getCurrentPosition(mapIt,locationError);
31                }
32   //定位成功時，執行的函式
33               function mapIt(position){ 
34                 var lon = position.coords.longitude;
35                    var lat = position.coords.latitude;
36                    // alert("您位置的經度是："+lon+" 緯度是："+lat);
37                 var map = new BMap.Map("allmap");
38                 var point = new BMap.Point(""+lon+"",""+lat+"");
39                 map.centerAndZoom(point,19);
40                 var gc = new BMap.Geocoder();
41                       translateCallback = function (point){
42                           var marker = new BMap.Marker(point);
43                           map.addOverlay(marker);
44                           map.setCenter(point);
45                           gc.getLocation(point, function(rs){
46                                 var addComp = rs.addressComponents;
47                                 if(addComp.province!==addComp.city){
48                                   var sContent =
49                                   "<div><h4 style='margin:0 0 5px 0;padding:0.2em 0'>你當前的位置是：</h4>" + 
50                                   "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber+"</p>" + 
51                                   "</div>";}
52                                 else{
53                                   var sContent =
54                                   "<div><h4 style='margin:0 0 5px 0;padding:0.2em 0'>你當前的位置是：</h4>" + 
55                                   "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+ addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber+"</p>" + 
56                                   "</div>";
57                                 }
58                                 var infoWindow = new BMap.InfoWindow(sContent);
59                                 map.openInfoWindow(infoWindow,point);
60                           }); 
61                       }                    
62                   BMap.Convertor.translate(point,0,translateCallback); 
63             }
64   // 定位失敗時，執行的函式
65                function locationError(error)
66               {
67               switch(error.code)
68                 {
69                 case error.PERMISSION_DENIED:
70                   alert("User denied the request for Geolocation.");
71                   break;
72                 case error.POSITION_UNAVAILABLE:
73                    alert("Location information is unavailable.");
74                   break;
75                 case error.TIMEOUT:
76                    alert("The request to get user location timed out.");
77                   break;
78                 case error.UNKNOWN_ERROR:
79                    alert("An unknown error occurred.");
80                   break;
81                 }
82               }
83   // 頁面載入時執行getLocation函式
84   window.onload = getLocation;  
85         })
86 </script>
87 </body>
88 </html>

 

相關文章