使用HTML5 GeoLocation 获取你的实时位置

baron.unsafe · 发表于 2013-1-29 08:44:31

演示地址：http://1.appliation.sinaapp.com/abc.php
看帖不回的木有小JJ
<!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>I am Baron</title><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script></head><body><span id="abc"></span><span id="status"></span><table border="1"><tr> <th >纬度</th> <td id="latitude">?</td> </tr> <tr> <td>经度</td> <td id="longitude">?</td> </tr> <tr> <td >准确性</td> <td id="accuracy">?</td> </tr> <tr> <td>最后时间戳</td> <td id="timestamp">?</td> </tr> </table><h4 id="currdist"></h4><h4 id="totaldist"></h4><div id="map" style="width:500px; height:600px; background-color:#000; opacity:0.85; margin-left:25%; margin-right:25%; margin-top:-180px;"></div><script type="text/javascript">var totaldistance=0.0;var lastlat;var lastlong;function updateStatus(message){document.getElementById("status").innerHTML=message;}//javascript 实现的Haversine公式function toRadians(degree){return degree * Math.PI /180 ;}function distance(latitude1,longitude1,latitude2,longitude2){//R 是地球半径，以KM为单位var R=6371;var deltalatitude=toRadians(latitude2-latitude1);var detalongitude=toRadians(longitude2-longitude1);latitude1=toRadians(latitude2);var a = Math.sin(deltalatitude/2) * Math.sin(deltalatitude/2)+Math.cos(latitude1) *Math.cos(latitude2) *Math.sin(detalongitude/2) *Math.sin(detalongitude/2);var c=2*Math.atan(Math.sqrt(a),Math.sqrt(1-a));var d=R*c;return d;}function loaddemo(){if(navigator.geolocation){updateStatus("浏览器支持");navigator.geolocation.watchPosition(updatelocation,handlocationError,{maximumAge:2000});}else{ updateStatus("你的浏览器不支持，请使用Google Chrome。"); }}window.addEventListener("load",loaddemo,true);function endRequest(){updateStatus("完成");}function updatelocation(position){endRequest();var latitude=position.coords.latitude;var longitude=position.coords.longitude;var accuracy=position.coords.accuracy;var timestamp=position.timestamp;document.getElementById("latitude").innerHTML=latitude;document.getElementById("longitude").innerHTML=longitude;document.getElementById("accuracy").innerHTML=accuracy;document.getElementById("timestamp").innerHTML=timestamp;//合理性检测----如果accuracy 太大，就不要计算距离 if(accuracy>500){ updateStatus("误差太大"); //return ; }//计算距离if((lastlat!==null) && (lastlong!=null)){var currentdistance=distance(latitude,longitude,lastlat,lastlong);document.getElementById("currdist").innerHTML="目前的距离"+currentdistance.toFixed(4)+"KM";totaldistance += currentdistance;document.getElementById("totaldist").innerHTML="总距离"+totaldistance.toFixed(4)+"KM";}lastlat=latitude;lastlong=longitude;initialize(position.coords.latitude,position.coords.longitude,"Your address","你有没有在这附近呢？");updateStatus("位置更新成功");}//Google Mapfunction initialize(latitude,longitude,title,sysinfo) { var newark = new google.maps.LatLng(latitude, longitude); var imageBounds = new google.maps.LatLngBounds( new google.maps.LatLng(latitude,longitude)); var myOptions = { zoom: 13,//地图的缩放程度 center: newark,//地图中心位置 mapTypeId: google.maps.MapTypeId.ROADMAP } //把地图绑定在id为map的div上 var map = new google.maps.Map(document.getElementById("map"), myOptions); //显示地址的标记图标 var marker = new google.maps.Marker({ position: newark, map: map, title:title, icon: 'http://maps.gstatic.cn/intl/zh-CN_cn/mapfiles/arrow.png' //自定义标记图标 }); var infowindow = new google.maps.InfoWindow({ //InfoWindow 内容提示 content: sysinfo, position: newark }); infowindow.open(map); //显示提示主窗口 //给marker 添加点击事件 google.maps.event.addListener(marker, 'click', function() { infowindow.open(map); //如果提示窗口关闭了，点击标记图标可再次显示提示主窗口 });}//使用错误处理函数function handlocationError(error){switch(error.code){case 0:updateStatus("有一个错误在检索你的位置"+error.message);break;case 1:updateStatus("无法从这个网页检索位置");break;case 2:updateStatus("浏览器无法确定您的位置"+error.message);break;case 3:updateStatus("浏览器超时检索位置");break;}}navigator.geolocation.getCurrentPosition(updatelocation,handlocationError,{timeout:10000});updateStatus("重新读取地址");</script></body></html>

		自动登录	找回密码
密码			立即注册