1. JS地理位置api介绍
2. JS具体实现
3. 使用百度地图
<br />
1. JS地理位置api介绍
<br />
navigator.geolocation对象是js中获取位置的对象，它有三个常用方法：
navigator.geolocation.getCurrentPosition(displayLocation,displayError, options);
//该方法获取当前位置
watchId = navigator.geolocation.watchPosition(displaylocation, displayError, options);
//该方法重复一直获取当前位置，返回一个ID;
navigator.geolocation.clearWatch(watchId);
//结束重重复一直获取当前位置，传入watchPosition方法返回的ID
关于getCurrentPosition方法与watchPosition中的参数解释：
这里提供了三个参数，这三个参数其实都是方法用来表示getCurrentPosition方法与watchPosition调用的状态（成功或失败，第三个参数除外，它是配置对象）：
第一个参数displayLocation （必选）
处理成功获取到位置信息时回调这个方法并传入一个Position对象包括两个属性coords与timestamp。
-
coords的属性有：
| 属性 | 解释 |
|---|---|
| latitude | 表示纬度 |
| longitude | 表示经度 |
| accuracy | 精度（单位米） |
| altitude | 高度 |
| altitudeAccuracy | 高度精度 |
| heading | 朝向 |
| speed | 速度 |
-
timestamp表示获取地理位置的时间。
<br />
第二个参数displayError（可选）
处理失败时回调这个方法并传入一个error对象包括两个属性code与message
-
code包含一个数字0到3表示对应的错误信息：
0: "Unknown error", //这是“全包型”错误，如果其他错误都不合适就会使用这个错误，查看error.message属性来了解更多信息
1: "Permission denied", //这表示用户拒绝了使用位置信息的请求
2: "Position is not available",//这说明浏览器尝试过，但是没能得到你的位置，同样的，查看error.message来得到更多信息
3: "Request timeout" //地理定位有一个内部超时设置，如果超出了这个时限但还没确定位置，就会导致这个错误
-
message 表示具体的错误内容。
<br />
第三个参数options（可选）
可以使用这个参数调整地理定位的行为
//配置获取地理位置的类
function option(enableHighAccuracy,timeout,maximumAge)
{
this.enableHighAccuracy = false;
this.timeout = Infinity;
this.maximumAge = 0;
}
//没有对象吗，程序员就new一个^_^
var options = new option(true,1000,0);
//以下是默认值与说明
enableHighAccuracy:false //启用高精度
timeout:Infinity //控制浏览器确定位置的时间，默认表示可以用所需的使用
任意时间来得到以，单位是毫秒10秒=10000毫秒
MaximumAge:0 //表示应用程序读取多少时间内的缓存而不是重新获取
2. JS具体实现
html代码
<!DOCTYPE html>
<html>
<head>
<title>地理位置</title>
<script src="位置.js"></script>
<link rel="stylesheet" href="位置.css">
</head>
<body>
<form>
<input type="button" id="watch" value="Watch me">
<input type="button" id="clearWatch" value="Clear watch">
</form>
<div id="location">
这里显示我的坐标
</div>
<div id="distance">
这里显示与指定坐标位置的距离
</div>
<div id="map">
</div>
</body>
</html>
js代码
// JavaScript Document
window.onload = getMyLocation;
//文档加载完成调用getMyLocation方法
var watchId = null;
//重复获取地理位置返回的值，全局变量做记录用
var options = new option(false, Infinity, 0);
//配置获取地理位置的类
function option(enableHighAccuracy,timeout,maximumAge)
{
this.enableHighAccuracy = false;
this.timeout = Infinity;
this.maximumAge = 0;
}
function getMyLocation() {
if (navigator.geolocation) {
//判断浏览器是否支持位置信息
// navigator.geolocation.getCurrentPosition(displayLocation, displayError, options);
//该方法获取当前位置
// watchId = navigator.geolocation.watchPosition(displaylocation, displayError, options);
//该方法重复一直获取当前位置，返回一个ID;
// navigator.geolocation.clearWatch(watchId);
//结束重重复一直获取当前位置，传入watchPosition方法返回的ID
var watchButton = document.getElementById("watch");
watchButton.onclick = watchLocation;
//开始重复
var clearWatchButton = document.getElementById("clearWatch");
clearWatchButton.onclick = clearwatch;
//结束重复 注意结束后设备耗电会减少很多
} else {
alert("浏览器不支持地理定位");
}
}
//watch按钮调用的方法，开始重复获取地理位置
function watchLocation() {
watchId = navigator.geolocation.watchPosition(displayLocation, displayError);
}
//clearWatch按钮调用的方法，结束重复获取地理位置
function clearwatch() {
if(watchId)
{
navigator.geolocation.clearWatch(watchId);
watchId = null;
}
}
//获取成功时回调的方法，并传入一个包含地理位置信息的参数
function displayLocation(position)
{
var latitude = position.coords.latitude; //纬度
var longitude = position.coords.longitude;//经度
var div = document.getElementById("location");
var ourCoords = {
latitude: 47.624851,
longitude: -122.52099
};
//创建一个包含一个位置的对象
div.innerHTML = "纬度是：" + latitude + " 经度是：" + longitude;
var km = computeDistance(position.coords, ourCoords);
//computeDistance 这个方法会返回两个坐标点之间的距离，单位是千米
var distance = document.getElementById("distance");
distance.innerHTML = "你与纬度为：" + ourCoords.latitude + "经度为：" + ourCoords.longitude + "的距离是" + km + "km";
distance.innerHTML += "你的位置精度为：" + position.coords.accuracy + "单位米";
}
//调用地理位置失败时，回调的方法，并传入一个参数error
function displayError(error) { //error是地理定位api向它传入的一个错误，包含一个0-3的数
var errorTypes = { //创建一个对象关联错误信息
0: "Unknown error", //这是“全包型”错误，如果其他错误都不合适就会使用这个错误，查看error.message属性来了解更多信息
1: "Permission denied", //这表示用户拒绝了使用位置信息的请求
2: "Position is not available", //这说明浏览器尝试过，但是没能得到你的位置，同样的，查看error.message来得到更多信息
3: "Request timeout" //地理定位有一个内部超时设置，如果超出了这个时限但还没确定位置，就会导致这个错误
};
var errorMessage = errorTypes[error.code]; //使用error.code属性，将一个错误消息值赋给新变量
if (error.code == 0 || error.code == 2) { //对于错误0和2，有时error.message属性中会有一些额外的信息，所以把这些信息增加到字符串中
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; // radius of the Earth in km
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) {
radians = (degrees * Math.PI) / 180;
return radians;
}
运行结果，单击watch me按钮后
Paste_Image.png
3. 使用百度地图
以下代码是调用百度api显示本地地址位置：
html代码
<!DOCTYPE html>
<html>
<head>
<title>百度地图地理位置</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!--让页面以正常比例进行显示并且禁止用户缩放页面的操作。-->
<script src="location.js"></script>
<link rel="stylesheet" href="location.css">
</head>
<body>
<div id="location">
这里显示我的坐标
</div>
<div id="map">
</div>
</body>
</html>
js代码
// JavaScript Document
window.onload = getMyLocation;
//文档加载完成调用getMyLocation方法
var latitude = ""; //纬度
var longitude = "";//经度
function getMyLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocation);
} else {
alert("浏览器不支持地理定位");
}
}
//获取成功时回调的方法，并传入一个包含地理位置信息的参数
function displayLocation(position) {
latitude = position.coords.latitude; //纬度
longitude = position.coords.longitude;//经度
var div = document.getElementById("location");
div.innerHTML = "纬度是：" + latitude + " 经度是：" + longitude;
loadScript();
//调用此方法异步调用百度地图api
}
function initialize() {
//创建地图实例
var map = new BMap.Map('map');
//创建一个坐标
var point = new BMap.Point(longitude, latitude);
//地图初始化，设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
map.addControl(new BMap.MapTypeControl());
var infoWindow = new BMap.InfoWindow("I am here"); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
}
function loadScript() {
var script = document.createElement("script");
// &callback=initialize地址后面加了这个表示在当脚本加载完成后callback函数会被立刻调用
script.src = "http://api.map.baidu.com/api?v=2.0&ak=255b0a41e091ecf12a0790305ddc816b&callback=initialize";
document.body.appendChild(script);
}
<br /><br /><br />
| 单词 | 解释翻译 |
|---|---|
| navigator | 导航器 |
| geolocation | 地理位置 |
| watch | 看 |
| Position | 位置 |
| latitude | 纬度 |
| longitude | 经度 |
| ourCoords | our(我们的)Coords(坐标) |
| enableHighAccuracy | enable(可用)High(高)Accuracy(精度) |
| timeout | 超时 |
| maximumAge | 读取缓存时间 |
| callback | 回调 |
| createElement | 创建元素 |
| appendChild | 添加末尾 |
