HTML 5提供了地理位置等一系列API可以给用户使用,方便用户制作LBS的地理应用,首先在支持HTML 5的浏览器中,当开启API时,会询问是否用户同意使用api,否则不会开启的,保证安全。
1) 开启,判断是否浏览器支持LBS api
-
function isGeolocationAPIAvailable()
-
{
-
-
var location = "No, Geolocation is not supported by this browser."
;
-
if
(window.navigator.geolocation) {
-
location = "Yes, Geolocation is supported by this browser."
;
-
}
-
alert(location);
-
}
上面的例子中,还在displayError方法中,捕捉了异常;
2 获得用户的地理位置:
这个使用getCurrentPosition就可以了;
-
function requestPosition() {
-
if
(nav ==
null
) {
-
nav = window.navigator;
-
}
-
if
(nav !=
null
) {
-
var geoloc = nav.geolocation;
-
if
(geoloc !=
null
) {
-
geoloc.getCurrentPosition(successCallback);
-
}
-
else
{
-
alert("Geolocation API is not supported in your browser"
);
-
}
-
}
-
else
{
-
alert("Navigator is not found"
);
-
}
-
}
当获得地理位置成功后,会产生一个回调方法了,处理返回的结果,
-
function setLocation(val, e) {
-
document.getElementById(e).value = val;
-
}
-
-
function successCallback(position)
-
{
-
setLocation(position.coords.latitude, "latitude"
); setLocation(position.coords.longitude,
"longitude"
);
-
}
3)
一个很常见的问题,是如何跟踪用户不断变化的地理位置,这里小结下其中用到的两个api。
1 watchPosition
例子如下:
-
-
function listenForPositionUpdates() {
-
if
(nav ==
null
) {
-
nav = window.navigator;
-
}
-
if
(nav !=
null
) {
-
var geoloc = nav.geolocation;
-
if
(geoloc !=
null
) {
-
watchID = geoloc.watchPosition(successCallback);
-
} else
{
-
alert("Geolocation API is not supported in your browser"
);
-
}
-
} else
{
-
alert("Navigator is not found"
);
-
}
-
}
然后在successCallback中,就可以设置显示最新的地理位置:
-
function successCallback(position){
-
setText(position.coords.latitude, "latitude"
); setText(position.coords.longitude,
"longitude"
);
-
}
如果不希望实时跟踪,则可以取消之:
function clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID);
}
4) 如何处理异常:
当遇到异常时,可以捕捉之:
-
if
(geoloc !=
null
) {
-
geoloc.getCurrentPosition(successCallback, errorCallback);
-
}
-
-
function errorCallback(error) {
-
var message = ""
;
-
switch
(error.code) {
-
case
error.PERMISSION_DENIED:
-
message = "This website does not have permission to use "
-
+ "the Geolocation API"
;
-
break
;
-
case
error.POSITION_UNAVAILABLE:
-
message = "The current position could not be determined."
;
-
break
;
-
case
error.PERMISSION_DENIED_TIMEOUT:
-
message = "The current position could not be determined "
-
+ "within the specified timeout period."
;
-
break
;
-
}
-
if
(message ==
""
) {
-
var strErrorCode = error.code.toString();
-
message = "The position could not be determined due to "
-
+ "an unknown error (Code: "
+ strErrorCode +
")."
;
-
}
-
alert(message);
-
}
5) 在google 地图上显示位置(前提是有google map api等设置好)
-
function getCurrentLocation()
-
{
-
if
(navigator.geolocation)
-
{
-
navigator.geolocation.getCurrentPosition(showMyPosition,showError);
-
}
-
else
-
{
-
alert("No, Geolocation API is not supported by this browser."
);
-
}
-
}
-
-
function showMyPosition(position)
-
{
-
var coordinates=position.coords.latitude+","
+position.coords.longitude;
-
var map_url="http://maps.googleapis.com/maps/api/staticmap?center="
-
+coordinates+"&zoom=14&size=300x300&sensor=false"
;
-
document.getElementById("googlemap"
).innerHTML=
"<img src='"
+map_url+
"' />"
;
-
}
-
-
function showError(error)
-
{
-
switch
(error.code)
-
{
-
case
error.PERMISSION_DENIED:
-
alert("This website does not have permission to use the Geolocation API"
)
-
break
;
-
-
case
error.POSITION_UNAVAILABLE:
-
alert("The current position could not be determined."
)
-
break
;
-
-
case
error.TIMEOUT:
-
alert("The current position could not be determined within the specified time out period."
)
-
break
;
-
-
case
error.UNKNOWN_ERROR:
-
alert("The position could not be determined due to an unknown error."
)
-
break
;
-
}
-
}
分享到:
相关推荐
地理位置定位的几种方式:IP地址,GPS,Wifi,GSM/CDMA 地理位置获取流程: 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。 3、假设用户允许,...
从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、communication、websocket、forms、web workers、storage 等api 的使用, 辅以直观明了的客户端和服务器端示例代码,让...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计和...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计和...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计和...
《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化,同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容,并对部分... 13.3 小结 275
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计和...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计...
第15章 HTML 5中的文件与拖放 280 视频讲解:40分钟 15.1 选择文件 281 15.1.1 通过file对象选择文件 281 15.1.2 使用blob接口获取文件的类型与大小 282 15.1.3 通过类型过滤选择的文件 283 15.2 ...
2.4 本章小结 15 第三章 跨域交互缓存处理设计 17 3.1 跨域交互缓存处理需求 17 3.1.1 缓存技术WebStorage 17 3.1.2 跨域交互缓存处理需求 17 3.1.3 页面回退管理需求 17 3.2 缓存处理机制 18 3.2.1 跨域缓存处理 18...
7.9 ecmascript 5中的数组方法 156 7.10 数组类型 160 7.11 类数组对象 161 7.12 作为数组的字符串 163 第8章 函数 165 8.1 函数定义 166 8.2 函数调用 168 8.3 函数的实参和形参 173 8.4 作为值的函数 178 8.5 作为...
7.9 ECMAScript 5中的数组方法 7.10 数组类型 7.11 类数组对象 7.12 作为数组的字符串 第8章 函数 8.1 函数定义 8.2 函数调用 8.3 函数的实参和形参 8.4 作为值的函数 8.5 作为命名空间的函数 8.6 闭包 8.7 函数属性...
7.9 ECMAScript 5中的数组方法 7.10 数组类型 7.11 类数组对象 7.12 作为数组的字符串 第8章 函数 8.1 函数定义 8.2 函数调用 8.3 函数的实参和形参 8.4 作为值的函数 8.5 作为命名空间的函数 8.6 闭包 8.7 函数属性...