H5+百度地图定位 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6     <title>获取地理位置</title>
  7     <style>
  8     html,body,#allmap{
  9     width:100%;
 10     height:100%;
 11     }
 12     </style>
 13     </head>
 14     <body>
 15         <div id="box"></div>
 16         <div id="allmap"></div>
 17         
 18         <script>
 19             var map;
 20             //异步加载地图
 21             function loadJScript() {
 22                 var script = document.createElement("script");
 23                 script.type = "text/javascript";
 24                 script.src = "http://api.map.baidu.com/api?v=2.0&ak=j9Qhl3n6K2RbPb2EnYr5LW0mEyaacdiC&callback=init";
 25                 document.body.appendChild(script);
 26             }
 27             function init() {
 28                 var map1 = new BMap.Map("allmap"); // 创建Map实例
 29                 var point = new BMap.Point(110, 38); // 创建点坐标
 30                 map1.centerAndZoom(point,15);
 31                 map1.enableScrollWheelZoom(); //启用滚轮放大缩小
 32                 map=map1;
 33             }
 34             window.onload = loadJScript;
 35             //异步加载地图
 36             //获取经纬度
 37             var x = document.querySelector("#box");
 38             function getLocation(){
 39                 if(navigator.geolocation){
 40                     console.log("123");
 41                     navigator.geolocation.getCurrentPosition(function(position){
 42                         console.log(456);
 43                         x.innerHTML ="纬度："+position.coords.latitude +"<br>经度："+
 44                         position.coords.longitude;
 45                         var longitude = position.coords.longitude,latitude = position.coords.latitude;
 46                         //调用百度地图api：
 47                         theLocation(map,longitude,latitude)
 48                     },
 49                     function (error){
 50                         switch(error.code)
 51                         {
 52                         case error.PERMISSION_DENIED:
 53                         x.innerHTML="User denied the request for Geolocation."
 54                         break;
 55                         case error.POSITION_UNAVAILABLE:
 56                         x.innerHTML="Location information is unavailable."
 57                         break;
 58                         case error.TIMEOUT:
 59                         x.innerHTML="The request to get user location timed out."
 60                         break;
 61                         case error.UNKNOWN_ERROR:
 62                         x.innerHTML="An unknown error occurred."
 63                         break;
 64                         }
 65                     },
 66                     {
 67                     // 指示浏览器获取高精度的位置，默认为false
 68                     enableHighAcuracy: true,
 69                     // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
 70                     timeout: 5000,
 71                     // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
 72                     maximumAge: 3000
 73                     }
 74                     );
 75                 }else{
 76                     x.innerHTML="该浏览器不支持获取地理位置！";
 77                     alert('123');
 78                 }
 79             }
 80             function theLocation(map,longitude,latitude) {
 81                 if (longitude != "" && latitude != "") {
 82                     map.clearOverlays();
 83                     var new_point = new BMap.Point(longitude, latitude);
 84                     //坐标转换
 85                     var convertor = new BMap.Convertor();
 86                     var pointArr = [];
 87                     pointArr.push(new_point);
 88                     convertor.translate(pointArr, 1, 5, function(data){
 89                         if(data.status === 0) {
 90                         //标注转换后的坐标
 91                         var marker = new BMap.Marker(data.points[0]);
 92                         map.addOverlay(marker);
 93                         var label = new BMap.Label("您现在的位置", {offset: new BMap.Size(20, -10)});
 94                         marker.setLabel(label); //添加百度label
 95                         map.setCenter(data.points[0]);
 96                         map.centerAndZoom(data.points[0],18);
 97                         }
 98                     })
 99                 }
100             }
101             //获取位置
102             getLocation();
103         </script>
104     
105     </body>
106 </html>

 

posted @ 2017-07-17 14:53  橙云生  阅读(1320)  评论(0)    收藏  举报