geolocation获取当前位置显示及计算两地距离
获取当前经纬度
利用HTML5（以及基于JavaScript的地理定位API），可以很容易地在页面中访问位置信息，下面代码，就可以简单的获取当前位置信息：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>获取当前位置</title>
</head>
<body>
<div id="location">
你的位置将显示在这
</div>
<div id="distance">
这是用来放距离的
</div>
<div id="map" style="width: 500px; height: 500px">
这是用来放地图的
</div>
<script>
/* 一旦浏览器加载页面，我们将调用函数getMyLocation */
window.onload = getMyLocation;
function getMyLocation() {
/* 利用这个检查来确保浏览器支持地理定位API。如果navigator.geolocation对象存在，说明浏览器支持这个API */
if (navigator.geolocation) {
/* 如果浏览器支持这个API，则调用getCurrentPosition方法，并传入一个处理函数displayLocation. */
navigator.geolocation.getCurrentPosition(displayLocation,,displayError);
}else{
/* 不支持地理定位时弹出提醒 */
alert("你的浏览器不支持地理定位")
}
}
/* 这个就是处理函数，浏览器得到一个位置时就会调用这个函数 */
function displayLocation(position){
/* 从position.coords对象得到位置的维度和经度 */
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById("location");
/* 使用innerHTML将位置信息插入location<div>中 */
div.innerHTML = "你的维度为："+latitude+"<br/>"+"你的经度为："+longitude;
}
</script>
</body>
</html>
用到地理定位时，并不是每次都能成功，所以可以创建一个小的诊断测试。
需要申明的是getCurrentPosition可以接收三个参数navigator.geolocation.getCurrentPosition(displaySuccess,displayError, options),其中成功回调，和失败回调是可选的。
在这里我们的诊断测试用的了失败回调函数,失败时调用displayError。
navigator.geolocation.getCurrentPosition(displayLocation,displayError )
现在要编写错误处理程序,geolocation将会向你的处理程序传入一个error对象，其中包含一个数值码，描述了它未能确定浏览器位置的原因。根据这个数值码还可以提供一个消息，包含有关这个错误的更多信息。
function displayError(error) {
errorTypes = {
0:"未知错误", /* 如果其他类型错误都不合适就会使用这个错误 */
1:"用户拒绝使用定位", /* 你自己拒绝使用地理定位 */
2:"位置不存在", /* 浏览器已经尽力了，但还是没能获取到你的位置 */
3:"超时" /* 地理请求有一个内部超时设置，如果超出时间却还没有确定位置就好报出这个错误 */
}
var errorMessage = errorTypes[error.code];
if (errorTypes == 0 || errorTypes ==2) {
errorMessage = errorMessage+" "+error.message;
}
var div = document.getElementById("location");
div.innerHTML = errorMessage;
}
在百度地图上显示你的位置
获取到经纬度之后往往需要在地图上显示出来，这里调用百度地图,调用地图需要使用该公司的API接口，因此引入百度地图API接口。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
密钥得自己去百度地图开发平台申请，不做商业用途不收费。
引入后在上面的displayLocation函数中增加下面代码：
var bdPoint = new BMap.Point(longitude,latitude);
var bm = new BMap.Map("map");
bm.centerAndZoom(bdPoint,15);
/* 添加位置标记 */
var markergg = new BMap.Marker(bdPoint);
bm.addOverlay(markergg);
便可得到如下地图，不过需要注意的是，台式浏览器上往往不能得到精确的位置，因为大多是根据ip来定位的，而且许多浏览器默认都禁止使用地理定位，不过使用新版的IE倒是可以。笔记本上有定位功能的开启后就较为精确，在有GPS的手机上，定位就更精确了。
以上地图来自台式电脑定位，误差很大。更多关于地图的操作可参考百度地图web开发API文档.
计算你和别人之间的距离
在实际运用中，知道了自己的位置，知道了别人的位置，往往需要计算两个位置之间的距离。
因此接下来计算两点距离，要计算两个坐标之间的距离，基本都会用半正失公式，如下：
function computeDistance(startCoords,destCoords){
var startLatRads=degreesToRadians(startCoords.latitude);
var startLongRade=degreesToRadians(startCoords.longitude);
var destLatRads=degreesToRadians(destCoords.latitude);
var destLongRads=degreesToRadians(destCoords.longitude);
var Radius=6371;
var distance=Math.acos(Math.sin(startLatRads)*Math.sin(destLatRads)+Math.cos(startLatRads)*Math.cos(destLatRads)*Math.cos(startLongRade-destLongRads))*Radius;
return distance;
}
function degreesToRadians(degrees){
var radians=(degrees*Math.PI)/180;
return radians;
}
以及对方的经纬度，这里随便写了一个
var ourCoords={
latitude:30.2526,
longitude:120.1656
};
然后还是在之前的displayLocation函数中继续增加下面代码：
/* 计算两点之间的距离 */
var km=computeDistance(position.coords,ourCoords);
var distance=document.getElementById("distance");
distance.innerHTML="你的位置距离纬度为:"+ourCoords.latitude+"<br/>"+"经度为:"+ourCoords.longitude+"<br/>"+"的距离为"+km+"km";
这样就可以得到两点之间的距离，我得到的是：
补充
在iOS10 以上苹果对webkit定位权限进行了修改，所有定位请求的页面必须是https协议的。在http协议下通过html5原生定位接口会返回错误，无法正常定位。
