HTML5获取地理位置并在Google地图上定位

最新推荐文章于 2022-07-24 16:55:28 发布

cleverutd

最新推荐文章于 2022-07-24 16:55:28 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/cleverutd/article/details/8580989

版权

HTML5为navigator新增了一个geolocation属性，这个属性是一个Geolocation对象，通过该对象获取浏览者的地理位置。

首先，Geolocation提供如下3个方法。

1、请求获取地理位置 getCurrentPosition(onSuccess,onError,options)。

onSuccess：成功获取地理位置是触发的回调函数。

onError：获取失败后的回调函数。(可选)

options：一些额外选项。（可选）

2、持续监听地理位置(相当于周期性地调用getCurrentPosition()方法) int watchCurrentPosition(onSuccess,onError,options)

方法参数与上面的一样。该方法返回一个int类型的标识，代表这个监听器的标识ID，从而允许程序在后面调用clearWatch(watchId)来取消监听

3、停止持续监听地理位置 clearWatch(watchId)

方法的参数就watchCurrentPosition()方法返回的“监听器”的标识

1.1、获取成功的回调函数

它是一个形如function(position){}的回调函数，方法参数表示所获取的地理信息。

position对象包含如下两个属性。

------》timestamp：返回获取地理位置的时间。

------》coords：返回一个Coordinates对象。包含如下属性

longitude：经度

latitude：纬度

altitude：高度

accuracy：精度和纬度的精确值，以米为单位

altitudeAccuracy：高度精确值

speed：返回浏览器所在设备的移动速度。不能获取是返回null

1.2、获取失败的回调函数

function(error),方法参数包含如下两个属性

------》code：返回错误代码。其中code有如下几种情况。

1、用户拒绝了位置服务

2、无法获取地址位置信息

3、获取地理位置信息超时。

------》message：返回错误描述信息。

1.3、额外的选项

------》enableHighAccuracy：指定是否要求高精度的地理位置信息

------》timeout：指定获取地理位置信息超时时长，如果没有在该时间内获取到地理位置，将会引发错误

------》maximumAge：指定地理信息的缓存时间，以毫秒为单位

代码如下：

<script type="text/javascript">
	var geoHandler = function(position)
	{
		var geoMsg = "用户的所在的地理位置信息是：<br/>";
		geoMsg += "timestamp属性为：" + position.timestamp + "<br/>";
		// 获取Coordinates对象，该对象里包含了详细的地理位置信息
		var coords = position.coords;
		// 遍历Coordinates对象的所有属性
		for(var prop in coords)
		{
			geoMsg += prop + "-->" + coords[prop] + "<br/>";
		}
		// 输出地理位置信息
		document.writeln(geoMsg);
	}
	var errorHandler = function(error)
	{
		// 为不同错误代码定义错误提示
		var errMsg = {
			1: '用户拒绝了位置服务',
			2: '无法获取地址位置信息',
			3: '获取地理位置信息超时'
		};
		// 弹出错误提示
		alert(errMsg[error.code]);
	}
	// 获取地理位置信息
	navigator.geolocation.getCurrentPosition(geoHandler
		, errorHandler
		, {
			enableHighAccuracy:true,
			maximumAge:1000
		});
</script>

通过浏览器获取地理位置后，可以利用这些信息做很多事情，，下面利用获取到的地理位置信息在Google地图上定位。这需要用到Google Map API

详细参考https://developers.google.com/maps/documentation/javascript/tutorial

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 在地图上定位 </title>
	<style type="text/css">
		html { height: 100% }
		body { height: 100%; margin: 0px; padding: 0px }
		#map_canvas { height: 100% }
	</style>
	<script type="text/javascript" 
		src="http://maps.google.com/maps/api/js?sensor=false">
	</script>
	<script type="text/javascript">
		function initialize() 
		{
			navigator.geolocation.getCurrentPosition(function(position)
			{
				// 获取浏览器提供的地理位置信息
				var latlng = new google.maps.LatLng(position.coords.latitude 
					, position.coords.longitude);
				// 设置创建Google地图的选项
				var myOptions = {
					zoom: 16,
					center: latlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				// 获取页面上的map_canvas组件
				var mapDiv = document.getElementById("map_canvas");
				// 创建Google地图，指定把地图显示到mapDiv组件上
				var map = new google.maps.Map(mapDiv , myOptions);
				// 在地图上创建标记
				var marker = new google.maps.Marker({
					position: latlng,
					animation: google.maps.Animation.BOUNCE,
					map: map
				});
				// 设定标注窗口，并指定该窗口中的注释文字
				var info = new google.maps.InfoWindow({
				  content: "我在这里!"
				});
				// 打开标注窗口
				info.open(map, marker);
			},
			function(error){alert("您的浏览器没有提供地理位置信息！");}
			,
			{
				enableHighAccuracy:true,
				maximumAge:1000
			});
		}
	</script>
</head>
<body οnlοad="initialize()">
	<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

cleverutd

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5获取地理位置并在Google地图上定位

HTML5为navigator新增了一个geolocation属性，这个属性是一个Geolocation对象，通过该对象获取浏览者的地理位置。首先，Geolocation提供如下3个方法。1、请求获取地理位置 getCurrentPosition(onSuccess,onError,options)。onSuccess：成功获取地理位置是触发的回调函数。onError：获取失败
复制链接

扫一扫