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. MongoDB分片集群节点状态stateStr:RECOVERING解决

    1.关闭一直处于RECOVERING状态的mongodb server /opt/mongodb/mongodb-linux-x86_64-2.4.8/bin/mongo  127.0.0.1:220 ...

  2. [Functional Programming ADT] Adapt Redux Actions/Reducers for Use with the State ADT

    By using the State ADT to define how our application state transitions over time, we clear up the ne ...

  3. [Angular] Extract Implementation Details of ngrx from an Angular Application with the Facade Pattern

    Extracting away the implementation details of ngrx from your components using the facade pattern cre ...

  4. Afinal的jar包进行代码混淆出错

    今天用到了代码混淆,混淆过后APP不能够运行,老报错,由于项目中只用了Afinal的第三方库,于是按照网上给出的答案为了不混淆Afinal的jar包,在配置文件中写入了下面的语句: -libraryj ...

  5. idea中git从码云克隆项目到本地

    1.首先需要在操作系统上安装Git分布式管理系统 此处自行百度............. 2.在Intellij IDEA中配置Git 打开Settings(File-->Settings) - ...

  6. JBoss 系列十八：使用JGroups构建块RpcDispatcher构建群组通信应用

    内容概要 本部分说明JGroups构建块接口RpcDispatcher,具体提供一个简单示例来说明如何使用JGroups构建块RpcDispatcher构建群组通信应用. 示例描述 类似Message ...

  7. HDU 4554 叛逆的小明

    叛逆的小明 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Total Submiss ...

  8. ES6 Promise catch

    getJSON方法返回一个 Promise 对象,如果该对象状态变为resolved,则会调用then方法指定的回调函数:如果异步操作抛出错误,状态就会变为rejected,就会调用catch方法指定 ...

  9. 单元测试JUnit 4 (一)——keeps the bar green to keeps the code clean

    1. 导读 Junit是一个可编写重复测试的简单框架,是基于Xunit架构的单元测试框架的实例.Junit4最大的改进是大量使用注解(元数据),很多实际执行过程都在Junit的后台做完了,而且写tes ...

  10. Centos 6.4 python 2.6 升级到 2.7一起的MySQLdb不能使用的解决问题

    查看python的版本#python -V Python 2.6.6 1.下载Python-2.7.3#wget http://python.org/ftp/python/2.7.3/Python-2 ...