Javascript API, 不是真正意義上html5的一部分,是w3c規(guī)范。幾乎所有現(xiàn)代桌面和移動瀏覽器都支持地理定位。地理定位只關(guān)注你的全球位置信息,而Google Map則提供了一個javascript庫耗溜,允許你訪問所有g(shù)oogle map的功能。Google map api 提供了一種便捷的方法來顯示用戶的位置省容。
地理定位如何確定你的位置:
1. GPS
利用衛(wèi)星提供精確位置信息抖拴,包括高度、速度腥椒、朝向信息(必須室外)
2. IP
使用外部數(shù)據(jù)庫將IP映射到一個物理地址阿宅,不過通常會解析為其他位置,比如你ISP本地分局的位置笼蛛。這種方法在城市級(甚至街區(qū)級)可靠洒放。
3. 蜂窩電話
蜂窩電話三角定位根據(jù)你和其他一個或多個蜂窩電話基站距離來確定(室內(nèi)可用)。一般比較精確滨砍,比GPS速度更快往湿,但如何附近只有一個基站,結(jié)果可能不精確
4. WIFI
通過一個或多個wifi接入點(diǎn)完成定位惋戏,精確领追、室內(nèi)可用、速度快响逢。但要求相對處于靜態(tài)绒窑。?舔亭?些膨?為什么可以用wifi wifi不是ip嗎 ip不是不準(zhǔn)嗎?
3個API
getCurrentPosition(successHandler, errorHandler, positionOptions)
如果成功處理程序钦铺,successHandler會傳入一個Position對象
errorHandler見實例
positionOptions調(diào)整定位行為 默認(rèn)參數(shù)為
{
enableHighAccuracy: false,//j即使是true也不能保證一定是高精度的
timeout: infinity,//超過指定毫秒數(shù)調(diào)用錯誤處理函數(shù)
maximumAge: 0//指定多長時間會重新獲取位置订雾, 為零的話就等于不使用緩存
}
watchPosition(successHandler, errorHandler, positionOptions)
return watchId
監(jiān)視移動,并在位置發(fā)生改變時報告位置职抡,傳遞一個成功處理程序給它,他將重復(fù)調(diào)用误甚。直至使用clearWatch將它清除缚甩。
positionOptions調(diào)整定位行為 默認(rèn)參數(shù)等同getCurrentPosiition
clearWatch(watchId)
對象
Position
有兩個屬性coords和timestamp
Coodinates
coords的值谱净, 包含latitude, longitude, accuracy???f, (前三個屬性必有擅威,后幾個看設(shè)備支持程度)altitude, altitudeAccuracy, heading, speed
實例
my.js
window.onload =? getMyLocation;
function getMyLocation(){
if(navigator.geolocation){
// navigator.geolocation.getCurrentPosition(displayLocation,displayErrorInfo);
var watchBtn = document.getElementById("watch");
watchBtn.onclick = watchLocation;
var clearWatchBtn = document.getElementById("clearWatch");
clearWatchBtn.onclick = clearWatch;
}
else{
alert("Oops..........");
}
}
function displayLocation(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById("location");
div.innerHTML = "...At latitude " + latitude + ", longitude " + longitude;
if(!map ){
showMap(position.coords);
}else{
scrollMapToPosition(position.coods);
}
}
function displayErrorInfo(error){
var errorTypes = {
0: "Unknown error",
1: "Permission denied",
2: "Position not available",
3: "Request time out;"
}
var errorMsg = errorTypes[error.code];
if(error.code === 0 || error.code === 2){
errorMsg =? errorMsg + " " + error.message;
}
var div = document.getElementById("location");
div.innerHTML = errorMsg;
}
var map;
var watchId = null;
function watchLocation(){
watchId = navigator.geolocation.watchPosition(displayLocation, displayErrorInfo);
}
function clearWatch(){
if(watchId){
navigator.geolocation.clearWatch(watchId);
watchId = null;
}
}
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");
map = new google.maps.Map(mapDiv, mapOptions);
var title= "Your Location";
var content = "You are here " + coords.latitude + ", " + coords.longitude;
addMarker(map, googleLatAndLong, title, content);
}
function scrollMapToPosition(coords){
var latlong = new google.maps.LatLng(coords.latitude, coords.longitude);
map.panTo(latlong);
addMarker(map, latlong, "Your new position", "You moved to latitude " + coords.latitude + " longitude "+ coords.longitude );
}
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);
});
}