Location acquisition method of geolocation API
-
global positioning system
-
Physical location mapped by location information based on IP address
-
Cellular telephone triangulation, according to the distance between different cellular base stations to determine the location.
-
Wi Fi access point completes triangulation.
These methods reuse each other to improve the accuracy of location information.
The distance between the two coordinates of a sphere is given by the formula of half positive.
| object | navigator | position | Coordinates |
| attribute |
geolocation |
coords timestamp (creation time) |
latitude longitude accuracy
altitude altitudeAccuracy heading speed |
| Method |
Method getCurrentPosition(successHandler, errorHandler, positionOptions) watchPosition clearPosition |
|
|
positionOptions parameter
positionOptions{
Enablehigh accuracy: false, / / enable high accuracy
timeout: Infinity, / / time to find
maximumAge: 0 / / time allowed to call cache
}
The specific code is as follows (css code will not be put here)
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);
}
Questions left:
When testing browser compatibility, chrome/Firefox/IE/Sougou are all available, only Microsoft edge does not successfully call Google's API. The prompt is "Google is not defined"
Find the API support of ME. Its official document supports webNavigation. I'll refer to chrome for this document. https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webNavigation