众所周知(雾),浏览器确定你的位置的方法有以下四种:
- GPS
- IP address
- 蜂窝电话
- Wi-Fi
这里暂且不谈各种方式的优缺点,但很多小伙伴可能会疑惑:
这么多方式,浏览器到底该采取哪种方式来确定我的位置呢?
其实不必疑惑,浏览器会根据情况自行选择,通常顺序是:
蜂窝电话 -> Wi-Fi或GPS.
IP地址在城市中会更加精确
虽然没有了解这些的必要,但多知道一点总没坏处。
OK,话不多说,我们切入正题。
——————————分割线————————————————
我们先建立一个基本的html页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Where am I?</title>
<script src="./myLoc.js"></script>
</head>
<body>
<div id="location">
<!--注意,id为"location"-->
Your location will go here.
</div>
</body>
</html>
接下来创建一个myLoc.js文件,存放我们的js代码
首先是一个getMyLocation函数
function getMyLocation() {
if (navigator.geolocation) {
//检测浏览器是否支持地理定位API
navigator.geolocation.getCurrentPosition(displayLocation, displayError);
//navigator.geolocation属性是一个对象,其中包含整个地理定位API,这个API支持的主要方法是getCurrentPosition
//getCurrentPosition的工作是获取浏览器位置,有三个参数,其中两个是可选的
//参数:successHandler, errorHandler, options
//successHandler是一个函数,如果浏览器能成功确定位置就会调用这个函数(必选)
//errorHandler,字面意思,如果浏览器无法确定位置就会调用这个函数(可选)
//options,允许定制地理定位方法
} else {
alert("Oops, no geolocation support.");
}
}
window.onload = getMyLocation;
这函数的主要内容都在注释中,建议先把注释看完再接着往下食用~
我们接下来的工作,就是编写当浏览器成功获取位置之后所调用的函数:
function displayLocation(position) {
/*当getCurrent成功调用displayLocation时,会向此函数传入一个position对象
这个position对象包含有关浏览器位置的信息,包括一个有纬度和经度的coordinates对象*/
var latitude = position.coords.latitude; //得到纬度
//coords是一个属性,其中包含对coordinates对象的一个引用
var longitude = position.coords.longitude; //得到经度
var div = document.getElementById("location");
div.innerHTML = "You're at Latitude:"+latitude+", Longtitude:"+longitude;
}
这样子,不出意外的话打开浏览器显示的就会是当前所处的经纬度了。
还有一个需要注意的地方,Chrome浏览器获取地理位置是需要翻墙的;我最开始写完之后死活无法加载我的位置,盯着代码看了好久…