地理定位API的位置獲取方式
-
GPS全球定位系統
-
基於IP地址的位置信息所映射到的物理位置
-
蜂窩電話三角定位，根據到不同蜂窩基站之間的距離來確定位置。
-
Wi-Fi接入點完成三角定位。
這些方法彼此之間複用，不斷提高位置信息精度。
球面兩個座標之間的距離，用半正矢（haversine）公式。
| 對象 | navigator | position | Coordinates |
| 屬性 |
geolocation |
coords timestamp（創建時間） |
latitude longitude accuracy
altitude altitudeAccuracy heading speed |
| 方法 |
方法 getCurrentPosition(successHandler, errorHandler, positionOptions) watchPosition clearPosition |
|
|
positionOptions參數
positionOptions{
enableHighAccuracy: false, //是否啓用高精度
timeout: Infinity, //查找的時間
maximumAge: 0 //允許調用緩存的時間
}
具體的代碼如下(css代碼就不往這放了)
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wherever you go, there you are</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="myLoc.js"></script>
<link rel="stylesheet" href="myLoc.css">
</head>
<body>
<form>
<input type="button" id="watch" value="Watch me">
<input type="button" id="clearWatch" value="Clear watch">
</form>
<div id="location">
Your location will go here.
</div>
<div id="distance">
Distance from WickedlySmart HQ will go here.
</div>
<div id="map">
</div>
</body>
</html>
js
window.onload = getMyLocation;
var ourCoords = {
latitude:47.624851,
longitude:-122.52099
};
function getMyLocation(){
if (navigator.geolocation){
var watchButton = document.getElementById("watch");
watchButton.onclick = watchLocation;
var clearWatchButton = document.getElementById("clearWatch");
clearWatchButton.onclick = clearWatch;
}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;
div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";
var km=computeDistance(position.coords, ourCoords);
var distance=document.getElementById("distance");
distance.innerHTML="You are " + km + "km from the WickedlySmart HQ";
if (map == null) {
showMap(position.coords);
}else{
scrollMapToPosition(position.coords);
}
}
function displayError(error){
var errorTypes = {
0: "Unknown 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;
}
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;
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){
var radians=(degrees*Math.PI)/180;
return radians;
}
var map;
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 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);
});
}
var watchId = null;
function watchLocation(){
watchId = navigator.geolocation.watchPosition(displayLocation, displayError,{timeout:5000});
}
function clearWatch(){
if(watchId) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
}
}
function scrollMapToPosition(coords){
var latitude = coords.latitude;
var longitude = coords.longitude;
var latlong = new google.maps.LatLng(latitude, longitude);
map.panTo(latlong);
addMarker(map, latlong, "Your new location", "You moved to:"+latitude+", "+longitude);
}
留下的疑問：
測試瀏覽器兼容性的時候，chrome/Firefox/IE/Sougou均可用，只有Miscrosoft Edge，沒有成功調用谷歌的API。提示爲“Google is not defined”
查找ME的API支持，其官方文檔關於webNavigation的支持，下面提示本文檔參考chrome。https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webNavigation