test.html
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script >
if (navigator.geolocation) {
console.log('Geolocation is supported!');
// var startPos;
var geoSuccess = function(position) {
startPos = position;
// console.log('startPos.'+ startPos.coords.latitude + " " + startPos.coords.longitude);
};
navigator.geolocation.getCurrentPosition(geoSuccess);
} else {
alert("浏览器不支持地理定位。");
}
</script>
testClose.html
<script src="//maps.google.com/maps/api/js?sensor=false"></script>
<script >
_callback = false;
function successCallback(position) {
_callback = true;
// startPos = position;
// console.log('startPos.'+ startPos.coords.latitude + " " + startPos.coords.longitude);
console.log('success' + position);
}
// 如果取消位置確認，相當於離開。
function errorCallback(error) {
callback = true;
console.log('error' + error);
webClose();
}
setTimeout(function(){if(!_callback)console.log('ignored')}, 20000);
if (navigator.geolocation) {
console.log('Geolocation is supported!');
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
{timeout: 2000}
);
} else {
alert("浏览器不支持地理定位。");
// 如果取消位置確認，相當於離開。
webClose();
}
function webClose() {
$('.your-tip').show();
$('.your-wrapper').hide();
$('#your-dialog').hide();
$('#your-sth').hide();
}
</script>
testShow.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浏览器地理位置信息api测试</title>
<style>
html,body,#gmap{height:100%; margin:0;}
body{font-size:83%;}
#help{padding-top:20%; text-align:center;}
</style>
</head>
<body>
<div id="gmap"></div>
<script src="//maps.google.com/maps/api/js?sensor=false"></script>
<script>
var eleGmap = document.getElementById("gmap");
var showMap = function(position) {
//经纬度
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//地图参数
var options = {
zoom: 10,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//地图
var map = new google.maps.Map(eleGmap, options);
//地图浮动提示
var marker = new google.maps.Marker({
position: pos,
map: map,
title: "用户位置"
});
//提示内容
var contentString = "<b>时间戳:</b> " + parseTimestamp(position.timestamp) + "<br/><b>用户位置:</b> 纬度 " + position.coords.latitude + ", 经度 " + position.coords.longitude + ", 精确度 " + position.coords.accuracy;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
//提示事件绑定
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
};
//时间戳获取与处理
var parseTimestamp = function(timestamp) {
var d = new Date(timestamp);
var day = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
var hour = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
var msec = d.getMilliseconds();
return year + "年" + month +"月"+ day +"日 "+ hour + ":" + mins + ":" + secs + ", " + msec;
};
if (navigator.geolocation) {
eleGmap.innerHTML = '<div id="help"><img src="loading_blue_s.gif" /><p>如果长时间加载不出来，可能因为没有ApiKeys!</p></div>';
//一次性获取位置的请求
navigator.geolocation.getCurrentPosition(showMap);
} else {
eleGmap.innerHTML = '<div id="help">您的浏览器不支持地理位置 O(∩_∩)O~</div>';
}
</script>
</body>
</html>本代码需要结合google地图的后台配置使用。在实际运用时，需要将js?sensor=false替换为js?key=yourKey
先运行test.html，点允许授权后，才可以访问testShow.html。
testClose.html，是模拟点击禁用后，进行的操作。禁用地图则不允许使用功能。
