浏览器地理位置(Geolocation)API 简介

最新推荐文章于 2025-02-18 00:00:00 发布

sysutangxiaoxi

最新推荐文章于 2025-02-18 00:00:00 发布

阅读量583

点赞数

http://www.zhangxinxu.com/wordpress/?p=1725

<!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="http://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="http://www.zhangxinxu.com/study/image/loading.gif" /></div>';
    //一次性获取位置的请求
    navigator.geolocation.getCurrentPosition(showMap);
} else {
	eleGmap.innerHTML = '<div id="help">您的浏览器不支持地理位置 O(∩_∩)O~</div>';
}
</script>
</body>
</html>