h5andbaidumap-地理定位 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #allmap
 8         {
 9             width:100%;
10             height: 600px;
11         }
12     </style>
13 </head>
14 <body>
15 <div id="box">
16 
17 </div>
18 <div id="allmap">
19 
20 </div>
21 <!--<a href="baidumap.html">点击查看</a>-->
22 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=j4XGypLNCQnsK8HmEGZN6WSgzjchmBnv"></script>
23 
24 <script >
25     var di=document.getElementById('box');
26     window.onload=function () {
27         if(navigator.geolocation){
28 //            alert('支持地理定位');
29             navigator.geolocation.getCurrentPosition(function (pos) {//成功返回函数
30                 var x=pos.coords.longitude;//经度
31                 var y=pos.coords.latitude;//纬度
32                 var q=pos.coords.altitude;//海拔
33                 box.innerHTML='经度位置:'+x+";<br>纬度位置："+y+";<br>海拔位置："+q;
34                 var ggPoint = new BMap.Point(x,y);
35 
36                 //地图初始化
37                 var bm = new BMap.Map("allmap");
38                 bm.centerAndZoom(ggPoint, 15);
39                 bm.addControl(new BMap.NavigationControl());
40                 //坐标转换完之后的回调函数
41                 translateCallback = function (data){
42                     if(data.status === 0) {
43                         var marker = new BMap.Marker(data.points[0]);
44                         bm.addOverlay(marker);
45                         marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
46                         var label = new BMap.Label("博看文思",{offset:new BMap.Size(20,-10)});
47                         marker.setLabel(label); //添加百度label
48                         bm.setCenter(data.points[0]);
49                     }
50                 }
51 
52                 setTimeout(function(){
53                     var convertor = new BMap.Convertor();
54                     var pointArr = [];
55                     pointArr.push(ggPoint);
56                     convertor.translate(pointArr, 1, 5, translateCallback)
57                 }, 1000);
58             },function (err) {//失败返回函数
59                 alert(err.code);//请求失败的编码
60             },{//数据返回
61                 enableHighAcuracy:true,
62                 timeout:10000,
63                 maximumAge:2000
64             })
65         }
66     }
67 
68 
69 </script>
70 </body>
71 </html>
indedxindedx.html

 

posted @ 2016-10-18 16:43  舍近求猿  阅读(149)  评论(0)    收藏  举报