HTML5 的位置

在HTML5COL学院的前面几个章节中我们已经对HTML5 Geolocation
API有了一定认识，接下来我们要对位置做些更有意思的处理；看看你与我们HTML5COL学院的办公室秘密位置相距多远。为此我们需要HTML5COL
学院的坐标，而且需要知道如何计算两个坐标之间的距离。

增加一个<div>

首先，在HTML中增加一个 <div>:

<!DOCTYPE html>

<html>

<head>

  <meta='keywords' content='HTML5COL学院,HTML5COL,CSS3,HTML5COL,编码社区'>

</head>

<body>

  <div id="location">

        Your location will go here.

  </div>

  <div id="distance">

        Distance from HTML5COL Office will go here.

  </div>

</body>

</html>

计算距离

用半正矢（Haversine）公式计算两个坐标之间的距离，由于这个超出这一章的范畴，我们会给HTML5COL学院一些成品代码来完成这个计算:

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) {

	//在HTML5COL学院‘画布’章节中还会看到更多地使用了这个函数

    var radians = (degrees * Math.PI)/180;

    return radians;

}

编写代码

既然有了一个函数来计算两个坐标之间的距离，下面我们来定义我们在HTML5COL学院总部办公室的位置(也是本课程作者所在的位置)，也可输入以下代码：

var ourCoords = {

    latitude: 47.624851,

    longitude: -122.52099

};

现在来编写代码，我们所要做的是把你的位置和HTML5COL学院总部办公地的坐标传递到computeDistance函数：

function displayLocation(position) {

    var latitude = position.coords.latitude;

    var longitude = position.coords.longitude;

    var div = document.getElementById("location");

    div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;

    var km = computeDistance(position.coords, ourCoords);

	//将你的位置坐标以及我们的坐标传递到computeDistance

    var distance = document.getElementById("distance");

    distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";

	//然后得到结果，并更新distance <div>的内容

}

代码总汇

<!DOCTYPE html>

<html>

<head>

<meta='keywords' content='HTML5COL学院,HTML5COL,CSS3,HTML5COL,编码社区'>

<script>

window.onload=getMylocation;

var ourCoords =  {

	latitude: 47.624851,

	longitude: -122.52099

};

function getMylocation(){

   if(navigator.geolocation){

        navigator.geolocation.getCurrentPosition(displayLocation,displayError);

} else{

 alert("Oops,no geolocation support!");

}

}

function displayLocation(position){

     var latitude=position.coords.latitude;

	 var longitude=position.coords.longitude;

	 var div=document.getElementById("location");

	 div.innerHTML="You are at Latitude:"+latitude+"Longitude:"+longitude;

	 var km = computeDistance(position.coords, ourCoords);

	 var distance = document.getElementById("distance");

	 distance.innerHTML = "You are " + km + " km from the HTML5COL Office";

}

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) {

	radians = (degrees * Math.PI)/180;

	return radians;

}

function displayError(error){

     var errorTypes={

	   0: "Unkown error",

	   1: "Permission denied by user",

	   2: "Position is not available",

	   3: "Request timed out"

	 };

	 var errorMessage=errorTypes[error.code];

	 if(error.code==0 || error.code==2){

	      errorMessage=errorMessage+" "+error.message;

	 }

	 var div=document.getElementById("location");

	 div.innerHTML=errorMessage;

}

</script>

</head>

<body>

   <p>position:</p>

   <div id="location" >

   </div>

   <div id="distance" >

   </div>

</body>

</html>

备用测试地址

HTML5 的位置的更多相关文章

  1. WKWebView中HTML5获取位置失败

    WKWebView中HTML5获取位置失败,在info.plist文件中添加以下代码打开网页时就会询问是否允许获取位置信息了. <key>NSLocationAlwaysUsageDesc ...

  2. HTML5 Geolocation位置信息定位总结

    现在定位功能很常用,所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据.HTML5 Geolocation的定位用法很简单,首先请求位置信息,用户同意,则返回位置信息.HTML5 Geoloc ...

  3. html5获取位置信息,h5获取位置信息

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Web前端发展前景及就业方向

    Web前端发展前景及就业方向 HTML5技术已经日趋成熟 Html5是移动互联网前端的主流开发语言,目前还没有一个前端的开发语言能取代 html5的位置,所以说,无论你是做手机网站还是在手机app应用 ...

  5. 使用html5获取当前手机的经纬度，并接入百度地图API，查询出当前位置

    最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...

  6. HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    <!DOCTYPE html> <html lang="zh-cmn-Hans">     <meta charset="UTF-8&quo ...

  7. 手机端网页使用html5地理定位获取位置失败的解决办法

    网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...

  8. HTML5 Geolocation用来定位用户的位置。

    HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...

  9. 根据HTML5 获取当前位置的经纬度【百度地图】【高德地图】

    是想让地图的定位用户位置更准确一些. 查看了介绍: http://www.w3school.com.cn/html5/html_5_geolocation.asp 看介绍中拿数据挺简单. <!D ...

随机推荐

  1. 搭建开源入侵检测系统Snort并实现与防火墙联动

    Snort作为一款优秀的开源主机入侵检测系统,在windows和Linux平台上均可安装运行.BT5作为曾经的一款经典的渗透神器,基于 Ubuntu,里面已经预装很多的应用,比如Mysql.Apach ...

  2. zabbix3.x安装出现“configure: error: Not found mysqlclient library”的解决办法

    一.zabbix3.x安装出现“configure: error: Not found mysqlclient library”的解决办法 1.编译安装zabbix-server出现 编译时加参数:- ...

  3. 使用Fabric模块实现自动化运维

    一.安装软件 简介:Fabric是基于Python实现的SSH命令行工具,简化了SSH的应用程序部署及系统管理任务,它提供了系统基础的操作组件,可以实现本地或远程shell命令,包括:命令执行.文件上 ...

  4. java 利用JAX-RS快速开发RESTful 服务实例

    首先看web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns=" ...

  5. 【android开发】10款实用的Android UI工具，非常有用！

    移动应用的UI设计就好似达摩克利斯之剑,一方面,一个视觉.交互.体验良好的UI可以加强应用在用户心目中的形象和识别性.而另一方面,一个体验糟糕的UI设计不仅无法让用户沉浸在应用中,还会造成用户对应用产 ...

  6. PHP-时间小结

    //获得本周(本天)时间戳的起始和结束//本周星期一时间戳$monday = mktime(0, 0, 0, date("m",strtotime("last Monda ...

  7. 我也分享一个c# ini操作类

    刚刚看了一篇 @云菲菲 的关于基于正则的INI辅助类文章:http://www.cnblogs.com/yunfeifei/p/4081977.html,作者写的不错.还看到评论处有一个的地址:htt ...

  8. Hibernate关系映射（二） 基于外键的双向一对一

    基于外键的双向一对一关联映射 需要在一端添加<one-to-one>标签,用property-ref来指定反向属性引用. 还是通过刚才用户和地址来演示双向一对一关联. 代码演示 一.实体类 ...

  9. python 学习定时任务apscheduler模块

    最近在解决定时任务问题找到了apscheduler模块,贴一段代码 from apscheduler.schedulers.blocking import BlockingSchedulerimpor ...

  10. 3、jQuery的DOM基础

    DOM模型在页面文档中,通过树状模型展示页面的元素和内容,其展示的方式则是通过节点(node)来实现的. 3.1 访问元素 3.1.1 元素属性操作 Attr()可以对元素属性执行获取和设置操作,而r ...