HTML位置感知

地理定位API如何确定你的位置？

1、GPS

2、IP地址

3、Wi-Fi

4、蜂窝电话

----------------------------------------

/* myLoc.js */var watchId = null;var map = null;var ourCoords =  {latitude: 47.624851,longitude: -122.52099};var prevCoords = null;window.onload = getMyLocation;function getMyLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(displayLocation, displayError,{enableHighAccuracy: true, timeout:9000});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);prevCoords = position.coords;}else {var meters = computeDistance(position.coords, prevCoords) * 1000;if (meters > 20) {scrollMapToPosition(position.coords);prevCoords = position.coords;}}}// --------------------- Ready Bake ------------------//// Uses the Spherical Law of Cosines to find the distance// between two lat/long points//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; // radius of the Earth in kmvar 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) {radians = (degrees * Math.PI)/180;return radians;}// ------------------ End Ready Bake -----------------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);// add the user markervar title = "Your Location";var content = "You are here: " + coords.latitude + ", " + coords.longitude;addMarker(map, googleLatAndLong, title, content);/*// add the WickedlySmart HQ markervar wsLatLong = new google.maps.LatLng(ourCoords.latitude, ourCoords.longitude);addMarker(map, wsLatLong, "WickedlySmart HQ", "WickedlySmart HQ latitude: " + ourCoords.latitude + ", longitude: " +ourCoords.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);});}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;}//// Code to watch the user's location//function watchLocation() {watchId = navigator.geolocation.watchPosition(displayLocation, displayError,{enableHighAccuracy: true, timeout:3000});}function scrollMapToPosition(coords) {var latitude = coords.latitude;var longitude = coords.longitude;var latlong = new google.maps.LatLng(latitude, longitude);map.panTo(latlong);// add the new markeraddMarker(map, latlong, "Your new location", "You moved to: " + latitude + ", " + longitude);}function clearWatch() {if (watchId) {navigator.geolocation.clearWatch(watchId);watchId = null;}}

它可以动态监视位置，并在地图中显示出来

navigator.geolocation

地理定位API

h@ttp://maps.google.com/maps/api/js?sensor=false

这是Google Maps javascript API的链接 ,sensor参数true用到你的位置，false不需要

new google.maps.LatLng(coords.latitude,  coords.longitude);

LatLng是构造函数，去经纬度，返回一个对象

------------------------------------------------------------------------

<!doctype html><html><head><link rel="icon"  type="image/ico"  href="http://wickedlysmart.com/favicon.ico"><title>Wherever you go, there you are</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"><meta charset="utf-8"><script src="h@ttp://maps.google.com/maps/api/js?sensor=false"></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>

/* * myLoc.css **/body {font-family: Arial, Helvetica, sans-serif;margin: 10px;}form, div#location, div#distance {padding: 5px;}div#map {margin: 5px;width: 400px;height: 400px;border: 1px solid black;}/* * Use this CSS to make the map full screen *html, body, div#map {    width: 100%;    height: 100%;    margin: 0px;}form {position: absolute;top: 40px;right: 10px;z-index: 2;}div#location, div#distance {display: none;} */