在许多情况下,获取用户位置对于建立更好的用户体验非常有用,例如:

  • 电子商务站点可以立即提供运输成本估算并通知本地零售商产品的可用性
  • 新闻站点可以提供本地化的头条新闻和天气预报。
  • 每日交易网站可以从用户的本地商店或餐厅提供优惠和折扣。
  • 电影站点可以在附近的剧院列出“正在播放”的电影

过去,要检索用户位置,我们可能需要提供位置列表供用户选择加入,或依靠设备IP地址粗略估算其位置。 如今,我们可以使用Geolocation API以更精简的方式进行此工作,并且复杂度更低。

地理位置API是可以被引入了新的技术W3C -背后的同一组织HTML5 。 可能由于这个原因,尽管实际上从技术上讲它与HTML5无关,但在许多书籍和参考中,它经常与HTML5关联和分组。

在本文中,我们将以最简单的形式使用API。 我们将创建一组函数来检索用户的位置并将其显示在Google Maps中 。 让我们来看看。

使用Google Maps API创建地图

首先,我们将使用Google Maps API和称为GoogleMap的功能来指定地图。 在以下JavaScript代码中,我们将通过以下两个Geolocation对象指定位置来获取位置: coords.latitudecoords.longitude ,它们检索纬度和经度坐标。

然后,我们使用google.maps.Mapgoogle.maps.Marker相应地设置地图和位置标记,如下所示。

function GoogleMap(position) {
	var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
	var map = new google.maps.Map(document.getElementById('map'), {
					zoom: 10,
					disableDefaultUI: true,	
					mapTypeId: google.maps.MapTypeId.TERRAIN,
				});
	var marker = new google.maps.Marker({
					map: map,
					position: location,
					animation: google.maps.Animation.DROP,
					title: "This is your location"
				});
	map.setCenter(location);
}

有关在Google Maps API上的更多实现,您可以转到Google Maps JavaScript API v3文档。

错误报告

然后,当无法检索位置时,我们为错误报告创建一个函数。 在这种情况下,我们将显示一个警告窗口,提示“找不到位置”。

function showError() {
	alert("Location can't be found");
}

运行地理位置

Geolocation API非常简单。 如下面的代码所示,它使用navigator.geolocation对象指定。

if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(GoogleMap, showError);
}
else {
	alert("Your browser does not support Geolocation.");
}

在上面的代码中,我们将首先运行一个测试,测试用户设备是否支持Geolocation API。 如果返回“否”,我们将显示一个警告窗口,显示“浏览器不支持地理位置”。 如果是这样,我们将尝试使用getCurrentPosition方法检索位置。

检索到位置坐标后,它将把数据发送到GoogleMap函数,以显示在地图上。 如果无法找到该位置,则将执行showError函数。



HtmlDivision 获取位置 Java代码_深度学习


HtmlDivision 获取位置 Java代码_深度学习


用户隐私

由于这是用户隐私的问题,因此用户必须意识到他们正在访问的设备或Web将跟踪其位置。 正如W3C在文档中所述

因此,浏览器将首先提示用户是否允许拒绝浏览器跟踪其位置信息。


HtmlDivision 获取位置 Java代码_php_03


HtmlDivision 获取位置 Java代码_php_03


结果准确性

结果准确性取决于许多因素,例如:

  • 用户的位置
  • 数据源的可用性,例如无线访问点和IP地址
  • 设备本身

在以下屏幕截图中,我在Macbook和iPhone中测试了上述代码。 事实证明,由于配备了GPS硬件,iPhone的位置比MacBook的位置更准确。


HtmlDivision 获取位置 Java代码_python_05


HtmlDivision 获取位置 Java代码_python_05


更多参考

如前所述,我们只是对Geolocation做了一件简单的事情,但实际潜力远不止于此。 我们可以使用API来实现更多的想法。 因此,如果您想进一步研究该主题,可以转到以下资源:

最后,转到演示页面以了解其运行情况。


翻译自: https://www.hongkiat.com/blog/html5-geolocation/