April 26, 2015
HomeDiv / Css / XML / HTML5 / SVGHTML5 Geolocation API应用：计算两地距离

HTML5 Geolocation API应用：计算两地距离

By  Div / Css / XML / HTML5 / SVG, Google / Facebook / Amazon / Twitter / Network, Javascript /Jquery / React / Bootstrap / Web  0 Comments

找出HTML5COL学院的位置

 

在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>

备用测试地址

原文：http://www.html5col.com/geolocationdistance/

Loading

Related Posts

  • 大型网站系统架构的演化

    前言 一个成熟的大型网站（如淘宝、京东等）的系统架构并不是开始设计就具备完整的高性能、高可用、安全等特性，它总是随着用户量的增加，业务功能的扩展 逐渐演变完善的，在这个过程中，开发模式、技术架构、设计思想也发生了很大的变化，就连技术人员也从几个人发展到一个部门甚至一条产品线。所以成熟的系统 架构是随业务扩展而完善出来的，并不是一蹴而就；不同业务特征的系统，会有各自的侧重点，例如淘宝，要解决海量的商品信息的搜索、下单、支付，例如腾讯， 要解决数亿的用户实时消息传输，百度它要处理海量的搜索请求，他们都有各自的业务特性，系统架构也有所不同。尽管如此我们也可以从这些不同的网站背景下， 找出其中共用的技术，这些技术和手段可以广泛运行在大型网站系统的架构中，下面就通过介绍大型网站系统的演化过程，来认识这些技术和手段。   一、最开始的网站架构 最初的架构，应用程序、数据库、文件都部署在一台服务器上，如图：…

  • 笔记-网页内嵌Google地图与地理位置模拟

    终于有机会开始玩HTML5中行动装置GPS整合应用。 我的第一步是希望能在网页整合Google地图，即便实际需求不一定需要显示地图，但在开发测试阶段，要求开发人员直接由25.1234, 121.5678之类数字判断结果是否正确未免太不人道，因此用地图方式呈现特定经纬度资料是绝对必要的。第一个练习题就来试试在网页中显示特定经纬度的地图吧! Google地图Javascript API已经发展到了V3，整合应用起来相当方便省事，而官方的说明文件写得颇为详细(甚至有中文)，要上手一点也不困难。以下便是我写的超简单的入门范例，试着在网页显示以政大校园八角亭为中心的地图。(八角亭是我每次猫空LSD的起点，经纬度数据在心跳表中唾手可得) <!DOCTYPE html>   <html>…

  • jQuery实现的向下推送图文信息滚动效果

    WEB页面需要展示网站最新信息，如微博动态、余票信息、路况监控等项目中常见的实时数据滚动效果，我们可以用jQuery来实现前端信息滚动效果。本文我们将结合实例为大家讲解如何使用jQuery来实现图文信息滚动效果。 查看演示 下载源码 HTML 我们以新浪微博信息滚动为背景，html中包含了多条微博图文信息，结构如下： <div id="con"> <ul> <li>…

Related Posts

About Author

Gideon

Add a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.