简介:Geolocation API用于将用户当前地理位置信息共享给信任的站点,当一个站点要获取用户的当前地理位置,需要通过浏览器请求用户授权。和Geolocation类似的google有个插件Gears,它通过插件安装的方式支持所有浏览器,不过目前google弃用它了。
这里我们讨论的是Geolocation,我们来看看如何使用。
一、检测浏览器是否支持:
if(!navigator.geolocation){
alert("您的浏览器不支持Geolocation");
return;
}
我们也可以通过
Modernizr检测,“Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.”
if(Modernizr.geolocation){
//let's find out where you are!
} else {
// no native geolocation support available
// maybe try Gears or another third-party solution
}
二、调用Geolocation API存在于navigator对象中,包含3个方法:
1、getCurrentPositionnavigator.geolocation.getCurrentPosition(success_callback, error_callback, {geolocation选项});第一个参数是用户允许浏览器共享geolocation成功后的回调方法第二个参数是用获取地理位置信息失败的处理方法,传入错误对象,包含code、message两个属性第三个参数都是geolocation选项,所有的geolocation选项都是可选的,它包含的属性如下:
interface PositionOptions {
attribute boolean enableHighAccuracy;
attribute long timeout;
attribute long maximumAge;
};
enableHighAccuracy(Boolean型,默认为false,是否尝试更精确地读取纬度和经度,移动设备上,这可能要使用手机上的GPS,这会消耗移动设备更多的电量)timeout(单位为毫秒,默认值为0,在放弃并触发处理程序之前,可以等待的时间----用户选择期间是不计时的)maximumAge(单位为毫秒,默认值为0。用来告诉浏览器是否使用最近缓存的位置数据,如果在maximumAge内有一个请求,将会返回它,而不请求新位置。maximumAge如果为Infinity,则总是使用一个缓存的位置,如果为0则必须在每次请求时查找一个新位置)
2、watchPosition用来跟踪不断变化的地理位置信息,可以设置间隔多少时间获取一次位置,和clearWatch一起使用。
3、clearWatch用来清除Position信息。
function success_callback(position) {
// Scrolls the map so that it is centered at (position.coords.latitude, position.coords.longitude).
}
// Request repeated updates.
var watchId = navigator.geolocation.watchPosition(success_callback, {geolocation选项});
function buttonClickHandler() {
// Cancel the updates when the user clicks a button.
navigator.geolocation.clearWatch(watchId);
}
请求授权访问位置信息
三、实例
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('geo_loc').innerHTML = '您当前的位置,纬度:' + lat + ',经度:' + lon;
//showonMap(lat,lon);
}, function(err) {
document.getElementById('geo_loc').innerHTML = err.code + "\n" + err.message;
});
} else {
document.getElementById('geo_loc').innerHTML = "您当前使用的浏览器不支持Geolocation服务";
}
成功后回调获取用户位置数据position,它包含两个属性:coords、timestamp。coords属性有7个值,包含上面用到的纬度、经度。1、accuracy 准确角2、altitude 海拔高度3、altitudeAcuracy 海拔高度的精确度4、heading 行进方向5、speed 地面的速度
四、在地图上显示
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('geo_loc').innerHTML = '您当前的位置,纬度:' + lat + ',经度:' + lon;
showonMap(lat,lon);
}, function(err) {
document.getElementById('geo_loc').innerHTML = err.code + "\n" + err.message;
});
} else {
document.getElementById('geo_loc').innerHTML = "您当前使用的浏览器不支持Geolocation服务";
}
function showonMap(lat,lon){
var latlng = new google.maps.LatLng(lat, lon);
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center:latlng
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:'您当前的位置'
});
}
分享到:
相关推荐
主要介绍了Html5 Geolocation获取地理位置信息实例,具有一定的参考价值,有兴趣的同学可以了解一下。
细粒度IP定位参文27:Identifying user geolocation
This concise book demonstrates the W3C Geolocation API in action, with code and examples to help you build HTML5 apps using the "write once, deploy everywhere" model. Along the way, you get a crash ...
Js-geolocation 是一个 Go 开发的,使用谷歌服务的客户端地理位置服务。地理位置数据库是由 Google 维护,非常可靠。{ "city":"cluj-napoca", "cityLatLong":{ "lat":46.777248, "long":23.59989 }, ...
地理位置FreeAPI 是在PYTHON和Flask中开发的简单API,免费用户可以将其集成到LocationIQ中:) 如何测试API 端点演示请求GET: ...
作为 HTML 演变的一部分而提供的新 API 之一是地理定位。 这是浏览器根据实际 GPS 数据、ISP、IP 地址或 Wi-Fi 网络返回设备纬度和经度的能力。 参考 CODEPEN ##Links 以帮助进行地理定位 以下是一些包含HTML5 地理...
HTML5 Geolocation(地理定位)用于定位用户的位置。 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。 浏览器支持 ...
本小菜刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能主要是由以下几个步骤:获取当前地理位置、调用Google Map API获取当前位置信息
HTML5定位技术,用于手机应用,网页的定位技术,和地图结合的很好,应该适当些时髦的技术
地理位置传感器 该存储库托管规范。 寻找解释器? 请参阅和。
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用,今天这篇文章就向大家介绍一下HTML5的Geolocation地理位置定位API使用教程.
地理定位 navigator.geolocation 对象
geolocation 根据地理坐标获取具体位置信息
HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来获取用户准确的地理位置...
后台地理位置控制台 一个简单的带有SQLite数据库的Node服务器和Web应用程序,用于对进行现场测试和分析。 您可以阅读有关此的新闻。 安装 您必须在计算机上安装和 。 在根项目目录中,从命令行运行以下命令: npm ...
地理编码示例地址到地理位置。 地理位置定位其他示例是
phonegap-地理定位地理位置
地理位置库的IP地址,可从内存数据库查询地理位置。 内存中的IP到地理位置查询。 安装 从npm安装。 npm install ip-to-geolocation 下载离线ip到地理位置数据库。 wget http://s.qdcdn.com/17mon/17monipdb.zip ...
HTML5的地理定位功能演示