施用HTML5 GeoLocation 获取你的实时位置-HTML教程-爱易网页

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

日期：2014-05-17　浏览次数：20766 次

使用HTML5 GeoLocation 获取你的实时位置
演示地址：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 Map
function 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的di

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>