测试有个bug,pc端没有app端精确javascript
<!DOCTYPE html> <html> <title>HTML5调用百度地图API进行地理定位实例</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script> </head> <body style="margin:50px 10px;"> <div id="status" style="text-align: center"></div> <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div> </body> </html> <script type="text/javascript"> //默认地理位置设置为北京 var x=116.404269,y=39.916706; window.onload = function() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser."; // 百度地图API功能 var map = new BMap.Map("container"); var point = new BMap.Point(x,y); map.centerAndZoom(point,12); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk); map.panTo(r.point); } else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true}) return; } alert("你的浏览器不支持获取地理位置!"); }; function showPosition(position){ x=position.coords.latitude; y=position.coords.longitude; } </script>
简单版:html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地理定位</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script> //获取当前地理信息 window.navigator.geolocation.getCurrentPosition(success,error); //获取地理信息成功时的回调函数 function success(position) { alert("成功获取您的地理信息"); //获取经度维度信息 //coords属性 var latitude = position.coords.latitude; var longitude = position.coords.longitude; //打印纬度,经度信息 alert(latitude); alert(longitude) } //获取地理信息失败时的回调函数 function error(msg) { alert("获取您的地理信息失败"); } </script> </body> </html>