手机端GPS定位结合百度地图实现定位

  • A+
所属分类:百度地图API

手机端GPS定位结合百度地图实现定位

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    
  6.     <style type="text/css">    
  7.         body, html, #allmap {    
  8.             width: 100%;    
  9.             height: 100%;    
  10.             overflow: hidden;    
  11.             margin: 0;    
  12.             font-family: "微软雅黑";    
  13.         }    
  14.     </style>    
  15.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>    
  16.     <title></title>    
  17. </head>    
  18. <body>    
  19.     <div id="allmap"></div>    
  20.     
  21.     <script type="text/javascript">    
  22.     
  23.         var x = "";    
  24.         var y = "";    
  25.         var dizhi = "";    
  26.     
  27.         function getLocation(){    
  28.             if (navigator.geolocation) {    
  29.                 navigator.geolocation.getCurrentPosition(showPosition,showError);    
  30.             }else{    
  31.                 alert("浏览器不支持地理定位。");    
  32.             }    
  33.         }    
  34.     
  35.         function showPosition(position){    
  36.            
  37.     
  38.             y = position.coords.latitude;//纬度    
  39.             x = position.coords.longitude;//经度    
  40.                 
  41.     
  42.             // 百度地图API功能    
  43.             //GPS坐标    
  44.             var x = 116.32715863448607;    
  45.             var y = 39.990912172420714;    
  46.             var ggPoint = new BMap.Point(x, y);    
  47.                 
  48.             //地图初始化    
  49.             var bm = new BMap.Map("allmap");    
  50.     
  51.             bm.centerAndZoom(ggPoint, 15);    
  52.             bm.addControl(new BMap.NavigationControl());    
  53.             bm.enableScrollWheelZoom();   //启用滚轮放大缩小,默认禁用    
  54.             bm.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用    
  55.             bm.addEventListener("tilesloaded", function () { });//地图加载完成    
  56.     
  57.             var gc = new BMap.Geocoder();    
  58.     
  59.     
  60.             bm.addEventListener("click", function (e) {    
  61.                     
  62.                 ggPoint = new BMap.Point(e.point.lng, e.point.lat);    
  63.                 gc.getLocation(ggPoint, function (rs) {    
  64.                        
  65.                     var addComp = rs.addressComponents;    
  66.                     var mapAddress = addComp.province + addComp.city + addComp.district    
  67.                     + addComp.street + addComp.streetNumber;    
  68.     
  69.                     dizhi = mapAddress;    
  70.     
  71.                     if (confirm(dizhi)) {    
  72.                         window.location.href = "succes.html"    
  73.                     }    
  74.     
  75.                     var marker = new BMap.Marker(ggPoint); // 创建点    
  76.                     bm.addOverlay(marker);    
  77.                     var label = new BMap.Label("您选择的位置为"+dizhi, { offset: new BMap.Size(20, -10) });    
  78.                     marker.setLabel(label); //添加百度label    
  79.                     bm.setCenter(ggPoint);    
  80.                 });    
  81.             });    
  82.                 
  83.                    
  84.                
  85.     
  86.             bm.addControl(new BMap.NavigationControl());    
  87.     
  88.     
  89.     
  90.             //坐标转换完之后的回调函数    
  91.             translateCallback = function (data) {    
  92.                 if (data.status === 0) {    
  93.                     var marker = new BMap.Marker(data.points[0]);    
  94.                     bm.addOverlay(marker);    
  95.                     marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画    
  96.                     //marker.enableDragging();//可拖拽    
  97.                     //var label = new BMap.Label("您所在的位置", { offset: new BMap.Size(20, -10) });    
  98.                     //marker.setLabel(label); //添加百度label    
  99.                     //bm.setCenter(data.points[0]);    
  100.     
  101.                        
  102.     
  103.                     //var a=BMap.Convertor(ggPoint, 0);    
  104.     
  105.     
  106.                     gc.getLocation(data.points[0], function (rs) {    
  107.                         //alert(rs.sematic_description);    
  108.     
  109.                         var addComp = rs.addressComponents;    
  110.                         var mapAddress = addComp.province + addComp.city + addComp.district    
  111.                         + addComp.street + addComp.streetNumber;    
  112.     
  113.                         dizhi = mapAddress;    
  114.     
  115.                         confirm(dizhi);    
  116.                         if (confirm(dizhi)) {    
  117.                             window.location.href = "succes.html"    
  118.                         }    
  119.     
  120.                         var label = new BMap.Label("定位您所在的位置为"+dizhi, { offset: new BMap.Size(20, -10) });    
  121.                         marker.setLabel(label); //添加百度label    
  122.                         bm.setCenter(data.points[0]);    
  123.     
  124.                     });    
  125.                                            
  126.                 }    
  127.             }    
  128.     
  129.             setTimeout(function () {    
  130.                 var convertor = new BMap.Convertor();    
  131.                 var pointArr = []    
  132.                 pointArr.push(ggPoint);    
  133.                 convertor.translate(pointArr, 1, 5, translateCallback)    
  134.             }, 1000);    
  135.     
  136.     
  137.         }    
  138.     
  139.         function showError(error){    
  140.             switch(error.code) {    
  141.                 case error.PERMISSION_DENIED:    
  142.                     alert("定位失败,用户拒绝请求地理定位");    
  143.                     break;    
  144.                 case error.POSITION_UNAVAILABLE:    
  145.                     alert("定位失败,位置信息是不可用");    
  146.                     break;    
  147.                 case error.TIMEOUT:    
  148.                     alert("定位失败,请求获取用户位置超时");    
  149.                     break;    
  150.                 case error.UNKNOWN_ERROR:    
  151.                     alert("定位失败,定位系统失效");    
  152.                     break;    
  153.             }    
  154.         }    
  155.     
  156.         getLocation();    
  157.     
  158.     
  159.     </script>    
  160.     
  161.     
  162. </body>    
  163. </html>    
钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: