HTML5学习之路(二)-地理定位

最新推荐文章于 2024-09-28 14:06:20 发布

fyrlovezzp

最新推荐文章于 2024-09-28 14:06:20 发布

阅读量539

点赞数

分类专栏： HTML5 文章标签：全球定位系统 html5

本文链接：https://blog.csdn.net/fyrlovezzp/article/details/42012987

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇文章总结了一下这两天对HTML5地理定位功能的学习，内容比较基础，与大家分享学习成果。

经度和纬度介绍：

要想知道某一个位置，我们需要一个坐标系统，而经度、纬度则正好给我们提供了这个坐标系统。

纬度是在南北方向指定地球上的一个点，经度则是在东西方向上指定地球上的一个点。

HTML5使用的地理定位API就是使用了经纬度来提供我们的位置坐标。

经度和纬度的表示：

1.使用度/分/秒的方式指定，例如（17°35′36″，117°30′36″）

2.使用小数值指定，例如（104.002171 , 30.660483）

注意:

西经和南纬都要用负数表示；

使用地理定位API时都要使用小数值，如果要将第一种表示方式转换为第二种，可以使用下面的函数：

function degreesToDecimal(degrees,minutes,seconds){
	return degrees + (minutes/60.0) + (seconds/3600.0)
}

-----------------------------------------分割线-----------------------------------------------

地址定位API如何确定位置：

1.GPS，很多较新的移动设备都支持全球定位系统(Global Positioning System)，它能利用卫星提供极其精确的位置信息。

2.IP地址，基于IP地址的位置信息使用一个外部数据库将IP地址映射到一个物理位置。这种方法的好处是任何地方都可以使用。

3.蜂窝电话，没有GPS的电话，可以通过蜂窝基站三角定位。基站越多位置越精确。

4.Wi-Fi定位，使用一个或多个Wi-Fi接入点完成三角定位。

我们不需要知道我们的设备使用哪种方式实现定位，浏览器会自己使用可用的方式进行定位。

-----------------------------------------分割线-----------------------------------------------

地理定位API(Geolocation):

Geolocation一共只有3个方法：

1.getCurrentPosition(successHandler,[errorHandler,positionOptions])

参数说明：

successHandler:获取位置成功时的回调函数，会传入一个position对象，position对象中的coords属性包含了位置信息；

errorHandler:无法定位时的回调函数，会传入一个错误；

positionOptions:可以调整地理定位的行为，控制地理定位如何计算它的值。

以下为代码实现过程，使用了百度地图API最后展示一下地图，如何使用百度地图API这里不做讲解(google地图API 确实好用，不过不翻墙的用户使用不了)。

HTML页面：

<!doctype html>
<html>
<head>
<title>我的位置</title>
<meta charset="utf-8">
<!--script src="http://maps.google.com/maps/api/js?sensor=false"></script-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的百度地图API密钥"></script>
<script src="myLoc.js"></script>
<link rel="stylesheet" href="myLoc.css">
</head>
<body>
<form>
<input type="button" id="watch" value="跟随我的位置">
<input type="button" id="clearWatch" value="清除跟随">
</form>
<div id="location">
我的位置
</div>


<div id="map">
</div>


</body>
</html>

myLoc.js:

var watchId = null;      //记录点击跟随按钮时调用watchPosition返回的Id,用来清除位置变化时的通知

window.onload = getMyLocation;	

function getMyLocation() {
	if (navigator.geolocation) {     //检查浏览器是否支持地理定位API

		navigator.geolocation.getCurrentPosition(     //当浏览器支持定位，则调用getCurrentPosition方法，传入处理函数
			displayLocation, 	//当浏览器得到一个位置时就会调用这个处理函数，并传入位置
			displayError,		//定义的错误处理函数，当浏览器无法获取到位置时会触发这个函数，并且会传入一个错误
			{
				enableHighAccuracy: true,  //启用高精度
				timeout:9000			//获取定位超时时间为9秒
			});	

		var watchButton = document.getElementById("watch");
		watchButton.onclick = watchLocation;
		var clearWatchButton = document.getElementById("clearWatch");
		clearWatchButton.onclick = clearWatch;
	}
	else {
		alert("你的浏览器不支持地理定位");
	}
}

//定位成功，获取到位置时的处理函数
function displayLocation(position) {       
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;

	var div = document.getElementById("location");
	div.innerHTML = "纬度: " + latitude + ", 经度: " + longitude;

	//调用百度地图，与HTML5地理定位API无关
	showBaiduMap(position.coords);
}

function showBaiduMap(coords){
	var latitude = coords.latitude;
	var longitude = coords.longitude;
	// 百度地图API功能
	var maps = document.getElementById("map");
	var map = new BMap.Map(maps);            // 创建Map实例
	var point = new BMap.Point(longitude,latitude); // 创建点坐标
	map.centerAndZoom(point,15);                 // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom();  //开启鼠标滚动缩放。

	var marker = new BMap.Marker(new BMap.Point(longitude , latitude)); // 创建标注
	map.addOverlay(marker);     //将标注添加到地图中
	}

//无法定位时的处理函数
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;
}


function watchLocation() {
	watchId = navigator.geolocation.watchPosition(
					displayLocation, 
					displayError,
					{enableHighAccuracy: true, timeout:3000});
}

function clearWatch() {
	if (watchId) {
		navigator.geolocation.clearWatch(watchId);
		watchId = null;
	}
}

myLoc.css：

body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 10px;
}
form, div#location {
	padding: 5px;
}

div#map {
	margin: 5px;
	width: 500px;
	height: 500px;
	border: 1px solid black;
}

测试结果：