测试有个bug,pc端没有app端精确
<!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>
简单版:
<!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>