测试代码,浏览器基本禁用了这个功能,只有IE支持。。。
实现效果如图:
<!DOCTYPE html>
<html>
<head>
<title>H5地理位置Demo</title>
<meta charset="utf-8"/>
<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script>
</head>
<body>
<div id="btnFindMe">
<button id="findMe">找到我</button>
</div>
<div id="myLocation"></div>
<script>
function init(){
var btnFindMe=document.getElementById('findMe');
btnFindMe.addEventListener('click',findMe,false);
}
function geoSuccess(position){
var dateDisplay=new Date(position.timeStamp);
var myLocationDiv=document.getElementById('myLocation');
myLocationDiv.innerHTML='纬度:'+position.coords.latitude+'经度:'+position.coords.longitude;
console.log(position);
}
function findMe(){
var myLocationDiv=document.getElementById('myLocation');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess);
myLocationDiv.innerHTML='正在载入...';
} else {
myLocationDiv.innerHTML='浏览器不支持定位';
}
}
window.addEventListener('load',init,false);
</script>
</body>
</html>