如今地理定位技術已經隨處可見了,發微博都能顯示當前位置更別提汽車導航了。本篇就簡介一下地理定位技術。
生活中常見的定位方式有: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}
//給我全新的位置,隨便瀏覽器花多長時間都行
除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
常用在導航系統中計算兩地距離時