H5+百度地图定位

 <!DOCTYPE html>

 <html lang="en">

     <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

     <title>获取地理位置</title>

     <style>

     html,body,#allmap{

     width:100%;

     height:100%;

     }

     </style>

     </head>

     <body>

         <div id="box"></div>

         <div id="allmap"></div>

         <script>

             var map;

             //异步加载地图

             function loadJScript() {

                 var script = document.createElement("script");

                 script.type = "text/javascript";

                 script.src = "http://api.map.baidu.com/api?v=2.0&ak=j9Qhl3n6K2RbPb2EnYr5LW0mEyaacdiC&callback=init";

                 document.body.appendChild(script);

             }

             function init() {

                 var map1 = new BMap.Map("allmap"); // 创建Map实例

                 var point = new BMap.Point(110, 38); // 创建点坐标

                 map1.centerAndZoom(point,15);

                 map1.enableScrollWheelZoom(); //启用滚轮放大缩小

                 map=map1;

             }

             window.onload = loadJScript;

             //异步加载地图

             //获取经纬度

             var x = document.querySelector("#box");

             function getLocation(){

                 if(navigator.geolocation){

                     console.log("123");

                     navigator.geolocation.getCurrentPosition(function(position){

                         console.log(456);

                         x.innerHTML ="纬度："+position.coords.latitude +"<br>经度："+

                         position.coords.longitude;

                         var longitude = position.coords.longitude,latitude = position.coords.latitude;

                         //调用百度地图api：

                         theLocation(map,longitude,latitude)

                     },

                     function (error){

                         switch(error.code)

                         {

                         case error.PERMISSION_DENIED:

                         x.innerHTML="User denied the request for Geolocation."

                         break;

                         case error.POSITION_UNAVAILABLE:

                         x.innerHTML="Location information is unavailable."

                         break;

                         case error.TIMEOUT:

                         x.innerHTML="The request to get user location timed out."

                         break;

                         case error.UNKNOWN_ERROR:

                         x.innerHTML="An unknown error occurred."

                         break;

                         }

                     },

                     {

                     // 指示浏览器获取高精度的位置，默认为false

                     enableHighAcuracy: true,

                     // 指定获取地理位置的超时时间，默认不限时，单位为毫秒

                     timeout: 5000,

                     // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。

                     maximumAge: 3000

                     }

                     );

                 }else{

                     x.innerHTML="该浏览器不支持获取地理位置！";

                     alert('123');

                 }

             }

             function theLocation(map,longitude,latitude) {

                 if (longitude != "" && latitude != "") {

                     map.clearOverlays();

                     var new_point = new BMap.Point(longitude, latitude);

                     //坐标转换

                     var convertor = new BMap.Convertor();

                     var pointArr = [];

                     pointArr.push(new_point);

                     convertor.translate(pointArr, 1, 5, function(data){

                         if(data.status === 0) {

                         //标注转换后的坐标

                         var marker = new BMap.Marker(data.points[0]);

                         map.addOverlay(marker);

                         var label = new BMap.Label("您现在的位置", {offset: new BMap.Size(20, -10)});

                         marker.setLabel(label); //添加百度label

                         map.setCenter(data.points[0]);

                         map.centerAndZoom(data.points[0],18);

                         }

                     })

                 }

             }

             //获取位置

             getLocation();

         </script>

     </body>

 </html>
巴特西

H5+百度地图定位

最新文章

热门文章
