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>