演示地址：
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的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>
分享到：
相关推荐
主要介绍了Html5 Geolocation获取地理位置信息实例，具有一定的参考价值，有兴趣的同学可以了解一下。
Seeker：利用HTML5，Javascript，JQuery和PHP以高精度获取设备信息和GeoLocation
本小菜刚开始学习HTML5，现在对其中的Geolocation颇感兴趣，结合Google Map的API实现基本的地图定位功能主要是由以下几个步骤：获取当前地理位置、调用Google Map API获取当前位置信息
为了顺应这个潮流，HTML5为我们提供了Geolocation库，有了它我们就能够在Web应用中轻而易举地实现上述这些功能。那么今天我就为大家介绍一下这个库的使用。 基本用法 首先，我们可以从浏览器的navigator对象中通过...
本文结合实例给大家分享如何使用HTML5，借助百度、谷歌地图接口来获取用户准确的地理位置信息。 源码下载：点此下载 如何使用HTML5地理位置定位功能 定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的...
Geolocation是HTML5标准下的一个Web API,利用它可以获取设备的当前位置信息（坐标），本篇文章主要介绍了三个方法，非常具有实用价值，需要的朋友可以参考下
今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象,感兴趣的朋友可以了解下
1.在HTML5中使用Geolocation.getCurrentPosition()方法来获取地理位置。 语法： navigator.geolocation.getCurrentPosition(success, error, options) 参数： success: 成功得到位置信息时的回调函数，使用...
4.5 使用html5 geolocation构建实时应用 83 4.5.1 编写html显示代码 84 4.5.2 处理geolocation数据 85 4.5.3 最终代码 88 4.6 进阶功能 90 4.6.1 现在的状态是什么 91 4.6.2 在goolge map上显示“我在这里” ...
4.5 使用HTML5 Geolocation构建实时应用 83 4.5.1 编写HTML显示代码 84 4.5.2 处理Geolocation数据 85 4.5.3 最终代码 88 4.6 进阶功能 90 4.6.1 现在的状态是什么 91 4.6.2 在Goolge Map上显示“我在这里” 92 4.7 ...
HTML5 Geolocation API（地理位置应用程序接口）可以获取当前地理位置，手机端使用GPS，电脑则根据网络定位 检查浏览器是否支持HTML5 Geolocation API [removed] if(navigator.geolocation){ alert('浏览器...
4.5 使用HTML5 Geolocation构建实时应用 83 4.5.1 编写HTML显示代码 84 4.5.2 处理Geolocation数据 85 4.5.3 最终代码 88 4.6 进阶功能 90 4.6.1 现在的状态是什么 91 4.6.2 在Goolge Map上显示“我在这里” 92 4.7 ...
4.5 使用HTML5 Geolocation构建实时应用 83 4.5.1 编写HTML显示代码 84 4.5.2 处理Geolocation数据 85 4.5.3 最终代码 88 4.6 进阶功能 90 4.6.1 现在的状态是什么 91 4.6.2 在Goolge Map上显示“我在这里” 92 4.7 ...
HTML5 Geolocation（地理定位）用于定位用户的位置。那么如何实现一个距离追踪器呢？我的思路是这样的，前提是浏览器支持h5地理定位，在这个基础上，获取用户位置，更新用户位置，计算距离，显示到页面，这样就简单...
如果支持地理定位，则尝试获取用户的当前位置，然后加载包含地图中心标记的 google STATIC 地图。 HTML5 地理定位 作为 HTML 演变的一部分而提供的新 API 之一是地理定位。 这是浏览器根据实际 GPS 数据、ISP、IP ...
4.5 使用HTML5 Geolocation构建实时应用 83 4.5.1 编写HTML显示代码 84 4.5.2 处理Geolocation数据 85 4.5.3 最终代码 88 4.6 进阶功能 90 4.6.1 现在的状态是什么 91 4.6.2 在Goolge Map上显示“我在这里” ...
从第 2章起，分别围绕构建令人神往的富Web 应用，逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用，辅以直观明了的客户端和服务器端示例代码，让开发人员...