您的位置：首页 > 其它

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

2014-04-16 15:37 162 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航