`
adamed
  • 浏览: 183820 次
社区版块
存档分类
最新评论

HTML5 Geolocation小结

 
阅读更多

HTML5中 Geolocation主要包括2个重要函数。

1、获取经纬度函数:

function getMyLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(displayLocation,displayError);
}else{
alert("Oops,no geolocation support!");
}
}

其中displayLocation,displayError分别表示获取成功handler以及获取失败handler。

2、计算2坐标点间地表距离:

/**
* 计算2点间距离
*/
function computeDistance(startCoords, destCoords) {
var startLatRads = degreesToRadians(startCoords.latitude);
var startLongRads = degreesToRadians(startCoords.longitude);
var destLatRads = degreesToRadians(destCoords.latitude);
var destLongRads = degreesToRadians(destCoords.longitude);
var Radius = 6371; // radius of the Earth in km
var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
Math.cos(startLatRads) * Math.cos(destLatRads) *
Math.cos(startLongRads - destLongRads)) * Radius;
return distance;
}

function degreesToRadians(degrees) {
var radians = (degrees * Math.PI)/180;
return radians;
}

 

3、开启实时位置监控及取消:

function watchLocation() {
watchId = navigator.geolocation.watchPosition(
displayLocation,
displayError,
{enableHighAccuracy: true, timeout:3000});
}

function clearWatch() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
}
}

 


 

需要注意的几项事宜:

1、你无法控制浏览器选择何种途径确定你的位置。

2、当开启位置跟踪时,你无法控制浏览器刷新页面的时间间隔。

3、计算两点距离时,计算结果为球面距离不是实际距离(考虑到城市马路规划)

4、当你保持不动的前提下,第一次加载页面时发现位置信息变化好多次。因为浏览器会自动根据几种不同的算法判断当前位置并最终给出精度最高的数据。

分享到:
评论

相关推荐

    Python-Seeker利用HTML5JavascriptJQuery和PHP以高精度获取设备信息和GeoLocation

    Python-Seeker是一个利用HTML5、JavaScript、jQuery和PHP技术构建的工具,旨在高精度地获取用户设备的各种信息,包括但不限于地理位置(GeoLocation)。这个项目主要面向开发者,特别是对网络应用监控、数据分析或...

    Html5学习资料总结

    7. **Geolocation定位**:HTML5的Geolocation API使得网页可以获取用户的地理位置信息,为地图应用和其他基于位置的服务提供了便利。 8. **表单控件增强**:HTML5对表单元素进行了升级,添加了新的输入类型(如...

    完整版《HTML5高级程序设计》5

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5高级程序设计

    从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、communication、websocket、forms、web workers、storage 等api 的使用, 辅以直观明了的客户端和服务器端示例代码,让...

    完整版《HTML5高级程序设计》2

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5学习课件及总结

    这个“HTML5学习课件及总结”资源包含了关于HTML5的基础知识、新特性以及与CSS3的结合应用。 一、HTML5基础知识 HTML5的核心在于简化语法、增强语义性和提供多媒体支持。在HTML5中,许多过时的元素被废弃,例如`...

    HTML5程序设计(第2版).[荷]Peter Lubbers(带详细书签).pdf

    从第 2章起,分别围绕构建令人神往的富Web 应用,逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用,辅以直观明了的客户端和服务器端示例代码,让开发人员...

    一个基于html5的摇号抽奖程序.zip

    6. Geolocation API:虽然摇号抽奖程序可能不需要地理位置功能,但HTML5的Geolocation API提供获取用户地理位置的能力,这在某些情况下可以增加互动性,例如基于位置的特殊奖项。 7. Responsive Design:HTML5配合...

    HTML5课程设计PPT,上机实验报告、HTML5源码

    HTML5是现代网页开发的核心标准,它极大地扩展了HTML4的功能,提供了许多新的元素、属性和API,使得网页开发者能够创建更加丰富、交互性更强的网页应用。本压缩包文件包含了一份HTML5课程设计的PPT,以及相关的上机...

    完整版《HTML5高级程序设计》4

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    System.Web.Mvc.Html5.dll .net html5开发必备

    总结起来,System.Web.Mvc.Html5.dll是.NET开发者在进行HTML5开发时的重要工具,它通过扩展ASP.NET MVC的HtmlHelper类,提供了一套完整的HTML5辅助方法,使得开发者可以轻松地在项目中利用HTML5的新特性,如新的标签...

    html5指南-4.使用Geolocation实现定位功能

    HTML5的Geolocation API为Web应用提供了强大的地理定位功能。通过`navigator.geolocation`对象,我们可以获取到用户的经纬度、高度、精度等信息,实现如地图应用、导航服务等功能。同时,通过异常处理,我们可以对...

    geolocation:浏览器 HTML5 JS 地理定位演示

    总结一下,HTML5的Geolocation API是JavaScript开发者获取用户地理位置的关键工具,结合JavaScript的事件处理和异步编程特性,可以构建出丰富多样的地理位置相关应用。这个压缩包中的示例项目是一个很好的学习资源,...

    用HTML5开发ios应用

    1. **HTML5的新特性**:如离线存储(localStorage)、拖放功能、媒体元素(video/audio)、canvas绘图、geolocation定位等,都是HTML5开发iOS应用时常用的技术。 2. **CSS3**:用于提升用户体验,提供动画、过渡效果...

    利用html5技术加载天地图

    总结来说,利用HTML5技术加载天地图,主要是通过HTML5的新特性、JavaScript库以及Web服务接口来实现地图的展示、交互和数据获取。这个过程涵盖了地理定位、图形渲染、数据存储和Web服务调用等多个方面,体现了HTML5...

    HTML5高级程序设计.part5

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5开发技术详细教程, HTML5代码大全, H5技术总结, 附带超详细html5学习路径图

    ### HTML5开发技术详细教程 #### 一、HTML5简介 HTML5是HyperText Markup Language(超文本标记语言)的第五个版本,是用于构建网页和应用程序的基础性语言。自2014年10月发布以来,HTML5已经成为Web开发的标准之...

    HTML5详解 Html5实战

    在APIs方面,HTML5提供了Geolocation API,可以获取用户的地理位置信息;Web Workers和Web Storage分别解决了多线程处理和数据持久化的问题;WebSockets则实现了双向通信,为实时应用如聊天室、游戏等提供了可能。 ...

    完整版《HTML5高级程序设计》3

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5高级程序设计.part4

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

Global site tag (gtag.js) - Google Analytics