1. 使用地理定位確定位置
- IP地址定位
- CPS定位
- 蜂窩電話基站定位
- wifi定位
一個(gè)聰明的瀏覽器可能會(huì)首先使用蜂窩電話三角定位渠旁，如果這個(gè)方法可行悯衬，你會(huì)得到一個(gè)大致的位置澈侠，然后使用Wi-Fi或GPS提供一個(gè)更精確的位置学歧。
2.使用javascrip API實(shí)現(xiàn)定位
- 首先創(chuàng)建location.html頁面
<!DOCTYPE html>
<html>
<head>
<title>Where am I ?</title>
<meta charset="utf-8">
<script src = "myLoc.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link type="text/css" rel="stylesheet" href="js.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>
- 使用javascrip API 的getCurrentPosition方法獲取經(jīng)緯度和錯(cuò)誤值腻菇。
//location.js
var options = {
enableHighAccuracy:true, //是否啟動(dòng)高精度耗式，啟用后會(huì)很費(fèi)電
timeout:100, //timeout 會(huì)控制瀏覽器確定位置的時(shí)間，默認(rèn)是毫秒五芝。
maximumAge: 0 //這個(gè)值是保存緩存的時(shí)間痘儡，如果在時(shí)間之內(nèi)請(qǐng)求定位，會(huì)用緩存的值枢步，如果超過時(shí)間沉删，請(qǐng)求現(xiàn)在的位置信息
};
window.onload = function() {
if(navigator.geolocation) { //查看是否支持定位，如果不支持醉途，則navigator.geolocation返回null
navigator.geolocation.getCurrentPosition(displayLocation, displayError, options); //getCurrentPosition有三個(gè)參數(shù) 1.successHanlder 2.errorHanlder 3.options,這里我們只輸入了successHandler 后兩個(gè)是可選的
// var watchButton = document.getElementById("watch");
// watchButton.onclick = watchLocation;
// var clearWatchButton = document.getElementById("clearWatch");
// clearWatchButton.onclick = clearWatch;
} else {
alert("Oops, no geolocation support");
}
}
//successHandler
function displayLocation (position){ //position是地理定位API向它傳入一個(gè)position對(duì)象矾瑰，其中包含有關(guān)瀏覽器位置的信息
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 += " (fonud in " + options.timeout + "milliseconse)"; //瀏覽器成功得到你的位置時(shí)，我們會(huì)讓用戶知道花了多長(zhǎng)時(shí)間
}
function displayError(error) {
var errorTypes = { //error對(duì)象有一個(gè)code屬性结蟋，其中包含一個(gè)0-3的數(shù)
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;
//如果第一次定位失敗脯倚，我們會(huì)把titmeout時(shí)間增加100ms,然后再試
options.timeout += 100;
navigator.geolocation.getCurrentPosition(
displayLocation,
displayError,
options
);
div.innerHTML += "........ checking again with timeout=" + options.timeout;
}
getCurrentPosition有三個(gè)參數(shù)
displayLocation是一個(gè)函數(shù)，如果瀏覽器能成功確定你的位置，則會(huì)調(diào)用這個(gè)函數(shù)推正，并且會(huì)傳一個(gè)position的對(duì)象恍涂，這個(gè)對(duì)象包含兩個(gè)兩個(gè)屬性coords和timestamp。
coords中又包含 latitude, longitude植榕，accuracy這幾個(gè)屬性再沧，還有其他屬性在這里就不寫了。另外兩個(gè)屬性是可選的尊残。displayError是第二個(gè)函數(shù)炒瘸，當(dāng)獲取定位信息失敗時(shí)，會(huì)在函數(shù)內(nèi)部傳入一個(gè)錯(cuò)誤的對(duì)象寝衫。
第三個(gè)參數(shù)是positionOptions參數(shù)顷扩。利用這個(gè)參數(shù)，可以控制地理定位如何計(jì)算他的值慰毅。
3. 利用兩個(gè)坐標(biāo)值來獲取距離
//回去兩個(gè)坐標(biāo)值的距離
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 = 7371; //radius of the Earth in km
var distance = (Math.sin(startLatRads) * Math.sin(destLatRads) +
Math.cos(startLatRads) * Math.cos(destLatRads) *
Math.cos(startLongRads - destLongRads)) * Radius;
return distance;
}
//把經(jīng)緯度轉(zhuǎn)化為度數(shù)
function degreesToRadians(degrees) {
var radians = (degrees * Math.PI)/180;
return radians;
}
4.把地圖添加到瀏覽器網(wǎng)頁中
// //谷歌地圖
var map = null;
function showMap(coords)
{
var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude); //googlemaps API所有方法前面都有g(shù)oogle.maps隘截，并且構(gòu)造函數(shù)注意大寫，LatLng 取我們的經(jīng)度和緯度
var mapOptions = {
zoom:10, //可以指定0-21的值汹胃，數(shù)值越大越顯示更多細(xì)節(jié)婶芭，10大概是城市規(guī)模
center:googleLatAndLong, //中心點(diǎn)
mapTypeId:google.maps.MapTypeId.ROADMAP //還有SATELLITE和HYBIRD
};
var mapDiv = document.getElementById("map");
map = new google.maps.Map(mapDiv, mapOptions); //全局map在這里使用
}
5.在地圖中添加大頭針
//在地圖上添加大頭針
function addMarker (map, latlong, title, content) //添加標(biāo)記的函數(shù)，參數(shù)分別是着饥，地圖犀农，經(jīng)緯，窗口標(biāo)題和窗口內(nèi)容
{
var markerOptions = //定義對(duì)象宰掉，屬性為google固定指定的
{
position:latlong,
map:map,
title:title,
clickable:true
};
var marker = new google.maps.Marker(markerOptions); //google的標(biāo)記構(gòu)造函數(shù)
var infoWindowOptions = //彈出窗口設(shè)置
{
content:content,
position:latlong
};
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(marker, "click", function () //google.maps.event.addListener為點(diǎn)擊事件增加監(jiān)聽者呵哨，監(jiān)聽者就像一個(gè)處理程序，類似onclick onload
{
infoWindow.open(map);
});
}
6.實(shí)時(shí)監(jiān)控
//實(shí)時(shí)監(jiān)控
var watchId = null;
function watchLocation() {
watchId = navigator.geolocation.watchPosition(displayLocation, displayError);
}
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(latlong, longitude);
map.panTo(latlong); //地圖的panTo方法取這個(gè)LagLng對(duì)象并滾動(dòng)地圖贵扰，是你的新位置位于地圖中心
addMarker(map, latlong, "Your new location", "you moved to: " + latitude + ", " + longitude);
}
全部代碼如下
myLoc.js
var options = {
enableHighAccuracy:true, //是否啟動(dòng)高精度仇穗，啟用后會(huì)很費(fèi)電
timeout:100, //timeout 會(huì)控制瀏覽器確定位置的時(shí)間，默認(rèn)是毫秒戚绕。
maximumAge: 0 //這個(gè)值是保存緩存的時(shí)間，如果在時(shí)間之內(nèi)請(qǐng)求定位枝冀，會(huì)用緩存的值舞丛，如果超過時(shí)間，請(qǐng)求現(xiàn)在的位置信息
};
window.onload = function() {
if(navigator.geolocation) { //查看是否支持定位果漾，如果不支持球切，則navigator.geolocation返回null
navigator.geolocation.getCurrentPosition(displayLocation, displayError, options); //getCurrentPosition有三個(gè)參數(shù) 1.successHanlder 2.errorHanlder 3.options,這里我們只輸入了successHandler 后兩個(gè)是可選的
// var watchButton = document.getElementById("watch");
// watchButton.onclick = watchLocation;
// var clearWatchButton = document.getElementById("clearWatch");
// clearWatchButton.onclick = clearWatch;
} else {
alert("Oops, no geolocation support");
}
}
//successHandler
function displayLocation (position){ //position是地理定位API向它傳入一個(gè)position對(duì)象，其中包含有關(guān)瀏覽器位置的信息
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)"; //這里用到position的accuracy屬性绒障，并追加到<div>的innerHTML的末尾
div.innerHTML += " (fonud in " + options.timeout + "milliseconse)"; //瀏覽器成功得到你的位置時(shí)吨凑，我們會(huì)讓用戶知道花了多長(zhǎng)時(shí)間
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 = { //error對(duì)象有一個(gè)code屬性，其中包含一個(gè)0-3的數(shù)
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;
//如果第一次定位失敗，我們會(huì)把titmeout時(shí)間增加100ms,然后再試
options.timeout += 100;
navigator.geolocation.getCurrentPosition(
displayLocation,
displayError,
options
);
div.innerHTML += "........ checking again with timeout=" + options.timeout;
}
//回去兩個(gè)坐標(biāo)值的距離
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 = 7371; //radius of the Earth in km
var distance = (Math.sin(startLatRads) * Math.sin(destLatRads) +
Math.cos(startLatRads) * Math.cos(destLatRads) *
Math.cos(startLongRads - destLongRads)) * Radius;
return distance;
}
//把經(jīng)緯度轉(zhuǎn)化為度數(shù)
function degreesToRadians(degrees) {
var radians = (degrees * Math.PI)/180;
return radians;
}
var ourCoords = {
latitude: 47.624851,
longitude: -122.52099
};
// //谷歌地圖
var map = null;
function showMap(coords)
{
var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude); //googlemaps API所有方法前面都有g(shù)oogle.maps鸵钝，并且構(gòu)造函數(shù)注意大寫糙臼，LatLng 取我們的經(jīng)度和緯度
var mapOptions = {
zoom:10, //可以指定0-21的值，數(shù)值越大越顯示更多細(xì)節(jié)恩商，10大概是城市規(guī)模
center:googleLatAndLong, //中心點(diǎn)
mapTypeId:google.maps.MapTypeId.ROADMAP //還有SATELLITE和HYBIRD
};
var mapDiv = document.getElementById("map");
map = new google.maps.Map(mapDiv, mapOptions); //全局map在這里使用
var title = "Your Location";
var content = "You are here" + coords.latitude + coords.longitude;
addMarker(map, googleLatAndLong, title, content);
}
//在地圖上添加大頭針
function addMarker (map, latlong, title, content) //添加標(biāo)記的函數(shù)变逃，參數(shù)分別是，地圖怠堪，經(jīng)緯揽乱，窗口標(biāo)題和窗口內(nèi)容
{
var markerOptions = //定義對(duì)象，屬性為google固定指定的
{
position:latlong,
map:map,
title:title,
clickable:true
};
var marker = new google.maps.Marker(markerOptions); //google的標(biāo)記構(gòu)造函數(shù)
var infoWindowOptions = //彈出窗口設(shè)置
{
content:content,
position:latlong
};
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(marker, "click", function () //google.maps.event.addListener為點(diǎn)擊事件增加監(jiān)聽者粟矿，監(jiān)聽者就像一個(gè)處理程序凰棉，類似onclick onload
{
infoWindow.open(map);
});
}
//實(shí)時(shí)監(jiān)控
var watchId = null;
function watchLocation() {
watchId = navigator.geolocation.watchPosition(displayLocation, displayError);
}
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(latlong, longitude);
map.panTo(latlong); //地圖的panTo方法取這個(gè)LagLng對(duì)象并滾動(dòng)地圖，是你的新位置位于地圖中心
addMarker(map, latlong, "Your new location", "you moved to: " + latitude + ", " + longitude);
}
js.css
#map {
width:400px;
height: 400px;
margin: 10px;
background-color: #444432;
}
#distance {
color: blue;
}
知行辦公陌粹，專業(yè)移動(dòng)辦公平臺(tái)https://zx.naton.cn/
【總監(jiān)】十二春秋之撒犀，3483099@qq.com；
【Master】zelo申屹，616701261@qq.com绘证；
【運(yùn)營(yíng)】運(yùn)維艄公哗讥，897221533@qq.com嚷那；****
【產(chǎn)品設(shè)計(jì)】流浪貓，364994559@qq.com杆煞；
【體驗(yàn)設(shè)計(jì)】兜兜魏宽，2435632247@qq.com；
【iOS】淘碼小工决乎，492395860@qq.com队询；iMcG33K，imcg33k@gmail.com构诚；
【Android】人猿居士蚌斩，1059604515@qq.com；思路的頓悟范嘱，1217022114@qq.com送膳；
【java】首席工程師MR_W，feixue300@qq.com丑蛤；
【測(cè)試】土鏡問道叠聋，847071279@qq.com；
【數(shù)據(jù)】fox009521受裹，42151960@qq.com碌补；
【安全】保密，你懂的。
