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

来源：互联网发布：淘宝海之蓝卖60真的吗编辑：程序博客网时间：2024/05/18 03:53
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>
0 0