地理定位技术

如今地理定位技术已经随处可见了，发微博都能显示当前位置更别提汽车导航了。本篇就简介一下地理定位技术。

生活中常见的定位方式有：GPS，IP地址，Wi-fi（多个Wifi接入点进行三角定位），蜂窝电话（基站越多越精确）

浏览器可能首选蜂窝电话三角定位，会得到个大致的位置，然后再用Wi-fi或GPS精确定位

一段简单的获取位置经纬度的代码：

先在HTML端导入Google API：

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

然后在JavaScript端添加以下代码：

window.onload = function() {
	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;  
    ...  //处理获取到的经纬度，如显示到页面上
}

function displayError(error) {
    var errorTypes = {
        0: "Unknown error",
        1: "Permission denied",
        2: "Position is not available",
        3: "Request timeout"
    };
    var errorMessage = errorTypes[error.code];
    if (error.code == 0 || error.code == 2) {
        errorMessage = errorMessage + " " + error.message;
    }
    var div = document.getElementById("location"); //页面上显示错误信息
    div.innerHTML = errorMessage;
}

如上述代码，位置信息保存在BOM对象 navigator.geolocation中， 通过 getCurrentPosition 方法来获取 位置情报。

位置情报保存在回调函数的参数中，能获取到经纬度海拔加速度等信息。

详见：http://diveinto.html5doctor.com/geolocation.html

getCurrentPosition方法其实有3个参数，分别为successHandler，errorHandler，options，后2个是可选的。

第三个参数options：

var positionOptions= {
    enableHighAccuracy: false,  //默认不启用高精度
    timeout: Infinity,          //默认Infinity表示浏览器可以用任意时间来得到位置，超时会调用errorHandler回调函数
    maximumAge: 0               //位置的最大年龄，超过这个年龄，浏览器会重新定位，0表示每次调用getCurrentPosition都要重新定位
}

因此可以有以下几种常见的排列组合：

//如果浏览器有一个年龄小于10分钟的缓存位置，就用这个。如无给我新位置

{maximumAge: 600000}             

//如果浏览器有一个年龄小于10分钟的缓存位置，就用这个。如无，在1秒内给我新位置           

{timeout : 1000, maximumAge: 600000} 

//给我缓存位置，无论年龄多大。如果没缓存就调用错误处理函数。总之不要给我新位置，我会离线使用

{timeout : 0, maximumAge: Infinity}  

//给我全新的位置，随便浏览器花多长时间都行   

{timeout: Infinity, maximumAge : 0}        

除getCurrentPosition方法外还有watchPosition，clearWatch。

watchPosition方法和getCurrentPosition方法很像，但行为稍有不同，每次你位置变化时它会重复调用你的successHandle回调函数，直到你调用clearWatch为止。

获得了经纬度之后，可以调用Google的公开API（如下）显示地图：

https://developers.google.com/maps/documentation/javascript/reference

常用的API：

地图：google.maps.Map

经纬度：google.maps.LatLng

大头钉：google.maps.Marker

信息窗：google.maps.InfoWindow

一段显示地图的JavaScript代码：

showMap(position.coords);    //将上面获取到的经纬度信息作为参数传入该自定义函数中

function showMap(coords) {
	var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude);
	var mapOptions = {
		zoom: 10,                                 //缩放比例尺
		center: googleLatAndLong,                 //中心点（设为当前经纬度）
		mapTypeId: google.maps.MapTypeId.ROADMAP  //地图类型
	};
	var mapDiv = document.getElementById("map");      //页面某div中显示该地图
	map = new google.maps.Map(mapDiv, mapOptions);

	// add the user marker
	var title = "Your Location";
	var content = "You are here: " + coords.latitude + ", " + coords.longitude;
	addMarker(map, googleLatAndLong, title, content); //加上大头钉
}

function addMarker(map, latlong, title, content) {        //自定义显示大头钉函数
	var markerOptions = {
		position: latlong,
		map: map,
		title: title,
		clickable: true
	};
	var marker = new google.maps.Marker(markerOptions);

	var infoWindowOptions = {
		content: content,
		position: latlong
	};
	var infoWindow = new google.maps.InfoWindow(infoWindowOptions);    //信息窗
	google.maps.event.addListener(marker, 'click', function() {        //点击大头钉后显示信息窗
		infoWindow.open(map);
	});
}

效果图：

点击大头钉会出现信息窗口哦 ^_^

如果要计算两点之间距离的话，考虑到地球表面非平面，因此还需要参考距离计算公式：

http://www.movable-type.co.uk/scripts/latlong.html

常用在导航系统中计算两地距离时