HTML5 的位置
Posted 随风
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5 的位置相关的知识，希望对你有一定的参考价值。
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 的位置的主要内容，如果未能解决你的问题，请参考以下文章
Android 使用两个不同的代码片段获取当前位置 NULL
HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段