HTML 5測位機能を利用して、百度地図上での測位を実現
30512 ワード
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>