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

最新推荐文章于 2022-12-27 11:52:53 发布

test808

最新推荐文章于 2022-12-27 11:52:53 发布

阅读量185

点赞数

分类专栏： javascript 文章标签： html5 javascript Google Maps ViewUI

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

演示地址：[url]http://1.appliation.sinaapp.com/abc.php[/url]
[b]看帖不回的木有小JJ[/b]


 <!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的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>

test808

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用HTML5 GeoLocation 获取你的实时位置

演示地址：[url]http://1.appliation.sinaapp.com/abc.php[/url][b]看帖不回的木有小JJ[/b][code="html"] I am Baron 纬度 ? 经度 ? ...
复制链接

扫一扫

专栏目录