如果您想识别用户的位置,HTML5的Geolocation API可帮助提供基于位置的信息或用户的路线导航详细信息。
可以使用不同的技术来识别用户的位置。通常,桌面浏览器使用基于WIFI或IP的定位技术,而移动浏览器则使用基于GPS,A-GPS和WIFI的定位技术。
为了识别用户的确切位置,Geolocation API将仅使用上述技术之一。芜湖高端网站制作:在将用户的位置信息发送到任何其他网站之前,授权应获得用户许可,从而通过Geolocation API保护用户的隐私。因此,建议用户通过弹出或对话需求来提示用户共享位置详细信息的权限。用户完全可以拒绝或接受请求。
首先,让我们了解API和Google地图中确切位置的图。第一步,您必须使用HTML5中的任何API检查与浏览器的兼容性。
检查浏览器兼容性
借助全局导航器对象的geolocation属性,可以轻松检测Geolocation API的浏览器。
1 | if (navigator.geolocation) { |
4 | alert( 'Geolocation is not supported in your browser' ); |
获取用户的当前位置
使用对象的getCurrentPosition
功能获取用户的当前位置navigator.geolocation
。此函数接受三个参数,即位置选项,成功回调函数和错误回调函数。
如果成功position
引入位置数据,则将使用获取的对象作为其输入参数来引发成功回调函数。否则,它将以错误对象作为其输入参数引发。
1 | if (navigator.geolocation) { |
4 | navigator.geolocation.getCurrentPosition(showPosition, showError, optn); |
6 | alert( 'Geolocation is not supported in your browser' ); |
成功回调功能
仅当用户允许共享位置详细信息并且浏览器成功获取位置数据时,您才能看到回调功能的提高。芜湖高端网站制作:可以将位置详细信息作为位置对象获得,该功能将称为位置对象作为其输入参数。
时间戳属性包含在位置对象中,该属性指示检索位置数据的时间和坐标对象。您可以在cords对象中找到以下属性,例如:
1 | function showPosition(position) { |
2 | document.write( 'Latitude: ' +position.coords.latitude+ 'Longitude: ' +position.coords.longitude); |
错误回调功能
错误回调函数是使用“位置错误”对象和“位置错误”对象的替代函数。由于以下任何一种情况,此功能增加了
请求超时
发生未知错误
位置信息本身不可用
用户拒绝分享位置信息
1 | function showError(error) { |
3 | case error.PERMISSION_DENIED: |
4 | alert( "User denied the request for Geolocation." ); |
6 | case error.POSITION_UNAVAILABLE: |
7 | alert( "Location information is unavailable." ); |
10 | alert( "The request to get user location timed out." ); |
12 | case error.UNKNOWN_ERROR: |
13 | alert( "An unknown error occurred." ); |
头寸选项
它提供有关在检索用户位置时可用选项的信息。
超时:它提供有关用户代理响应位置数据所花费的最长时间(以毫秒为单位)的信息。默认值为无穷大。
enableHighAccuracy:这将提供最准确位置的准确信息,从而导致响应时间变慢和功耗增加。如果为假,则显示的位置精度较低。
maximumAge:这样,用户代理可以在尝试获取最新位置数据之前简单地了解缓存的位置数据。有了零值,现在可以简单地说,用户代理必须使用缓存的位置数据,而无穷大值表示用户代理必须使用缓存的位置数据。
1 | if (navigator.geolocation) { |
3 | enableHighAccuracy : true, |
7 | navigator.geolocation.getCurrentPosition(showPosition, showError, optn); |
9 | alert( 'Geolocation is not supported in your browser' ); |
跟踪位置变化
如果要获取位置数据,watchPosition()
可以使用。当设备或用户代理位置发生变化时,成功回调函数将被重复调用。可以找到与此功能相同的getCurrentPosition()
参数。芜湖高端网站制作:它返回一个监视ID值,该值可以通过将成功的回调函数传递给该clearWatch()
函数来注销该函数。
2 | if (navigator.geolocation) { |
4 | enableHighAccuracy : true, |
8 | watchId = navigator.geolocation.watchPosition(showPosition, showError, optn); |
10 | alert( 'Geolocation is not supported in your browser' ); |
15 | navigator.geolocation.clearWatch(watchId); |
在Google地图上显示我的位置
Google Maps API和Geolocation API一起用于在Google Maps上绘制位置。首先,使用Geolocation API将位置对象的纬度和经度坐标转换为Google地图latLng对象。
1 | var googlePos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); |
现在,创建一个Map对象以指定地图显示选项和HTML div容器(应在其中显示地图)。下面给出了三个地图显示选项:
mapTypeId –显示路线图,卫星图或混合图
缩放–指示缩放级别
居中–指定地图应居中于用户位置
4 | mapTypeId : google.maps.MapTypeId.ROADMAP |
6 | var mapObj = document.getElementById( 'mapTxt' ); |
7 | var googleMap = new google.maps.Map(mapObj, mapOptions); |
现在,在以下位置绘制标记
4 | title : 'Hi , I am here' , |
5 | animation : google.maps.Animation.DROP |
7 | var googleMarker = new google.maps.Marker(markerOpt); |
可以在上面的代码标记选项中简单地看到以下内容:
标题–当您将鼠标悬停在标记上时显示
地图–可以看到标记应出现的位置
位置-它是位置,应在此处显示标记。
建议使用反向地理编码API查找您的位置地址,并显示单击标记时获得的地址。
1 | var geocoder = new google.maps.Geocoder(); |
4 | }, function (results, status) { |
5 | if (status == google.maps.GeocoderStatus.OK) { |
8 | content : results[1].formatted_address, |
11 | var popup = new google.maps.InfoWindow(popOpts); |
12 | google.maps.event.addListener(googleMarker, 'click' , function () { |
13 | popup.open(googleMap); |
16 | alert( 'No results found' ); |
19 | alert( 'Geocoder failed due to: ' + status); |
如果您想添加一些出色的功能,请开始浏览Google Maps API。您还可以帮助HTML5开发人员采用地理位置服务。