演示地址：
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>
分享到：
相关推荐
在现代Web开发中，`geolocation` API 是一个至关重要的工具，它允许网站和服务获取用户的地理位置信息，从而提供更加个性化的服务和体验。这个API是HTML5的一个特性，旨在为浏览器提供一种标准化的方法来访问设备的...
HTML5 Geolocation是HTML5提供...以上就是HTML5 Geolocation获取地理位置信息实例的主要知识点。通过这些知识点，开发者可以更好地利用HTML5 Geolocation进行位置信息相关的Web开发，创建更丰富的交互式位置服务应用。
HTML5定位技术是现代网页开发中的一个重要特性，它允许网页应用程序获取用户设备的地理位置信息，为用户提供更加个性化和精准的服务。这项技术主要依赖于Geolocation API，它在浏览器环境中提供了获取用户位置的能力...
Python-Seeker是一个利用HTML5、JavaScript、jQuery和PHP技术构建的工具，旨在高精度地获取用户设备的各种信息，包括但不限于地理位置（GeoLocation）。这个项目主要面向开发者，特别是对网络应用监控、数据分析或...
HTML5的Geolocation API是现代Web开发中用于获取设备地理位置信息的重要工具，它允许网页应用获取用户的精确位置，如经纬度、海拔等。这个API在移动应用和地图服务中尤其常见，例如集成Google Maps API来展示用户的...
1. **获取用户位置**：使用`navigator.geolocation`对象的`watchPosition`或`getCurrentPosition`方法，可以周期性地或者一次性获取用户的经纬度坐标。开发者可以通过回调函数处理这些位置信息。 2. **权限管理**：...
Geolocation API是HTML5提供的一种获取用户当前位置的API，可以通过浏览器获取用户的当前位置，并将其应用于各种应用场景中，如考勤管理系统、导航系统等。 知识点4: 考勤管理系统的设计与实现 本文完成了一个基于...
HTML5 Geolocation是一种在Web应用中获取用户地理位置信息的关键技术，它是HTML5标准的重要组成部分，使得开发者无需依赖浏览器插件就能实现定位功能。基于这项技术的考勤管理系统方案旨在利用现代浏览器的功能，...
HTML5 Geolocation API是Web开发中的一个重要工具，它允许网页应用程序获取访问设备的地理位置信息，如经纬度坐标、高度、速度等。这个API是HTML5标准的一部分，为开发者提供了无须借助外部插件就能实现地理位置服务...
在Web开发中，`navigator.geolocation`是HTML5引入的一个API，允许网页获取用户的地理位置。通过调用这个API，开发者可以请求访问用户的位置信息，并在用户同意后得到经纬度坐标。以下是一个简单的示例： ```...
在HTML5中，通过Geolocation API，我们可以获取到设备的地理位置，包括经纬度坐标。这个功能使得网页应用能够实现类似Google Maps这样的地理定位服务。 在"html5获取Google经纬度"的场景中，首先我们需要理解HTML5...
Geolocation API是HTML5的一项重要功能，它允许网页应用获取用户的地理位置信息，从而为用户提供更加个性化的服务，比如基于位置的交友、推荐附近活动等。 【描述分析】 "html开发"的描述简洁明了，表明项目的核心...
当用户设备处于离线状态时，HTML5位置服务通常无法工作，因为它依赖网络来获取位置信息。但在某些情况下，如果设备之前已经获取过位置，浏览器可能会缓存这些信息并在离线时使用。 9. **性能和电池消耗** 持续...
2. HTML5位置服务兼容性：并不是所有的浏览器都支持Geolocation API。本文的代码首先检查浏览器是否支持该API，如果支持，则可以调用`navigator.geolocation.getCurrentPosition()`方法来获取用户位置。 3. 获取...
Geolocation API是HTML5的一个重要特性，它允许Web应用获取用户的地理位置信息。这对于地图应用、本地服务搜索等场景非常有用。开发者可以通过调用`navigator.geolocation`对象的相关方法，如`getCurrentPosition()`...
为了顺应这个潮流，HTML5为我们提供了Geolocation库，有了它我们就能够在Web应用中轻而易举地实现上述这些功能。那么今天我就为大家介绍一下这个库的使用。 基本用法 首先，我们可以从浏览器的navigator对象中通过...
#### 知识点四：HTML5地理位置定位API的使用 - **JavaScript代码实现**：通过简单的JavaScript代码调用Geolocation API，可以从用户的浏览器中收集位置信息。 - **位置权限请求**：在使用地理位置服务之前，必须向...