HTML 5中地理位置api小结

标签: html 地理位置 api | 发表时间:2013-01-02 10:58 | 作者:
出处:http://www.iteye.com
  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;
  }
 }



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [html 地理位置 api] 推荐:

HTML 5中地理位置api小结

- - ITeye博客
  HTML 5提供了地理位置等一系列API可以给用户使用,方便用户制作LBS的地理应用,首先在支持HTML 5的浏览器中,当开启API时,会询问是否用户同意使用api,否则不会开启的,保证安全. 1) 开启,判断是否浏览器支持LBS api.    上面的例子中,还在displayError方法中,捕捉了异常;.

5个不可错过的HTML 5中的API

- - ITeye博客
  这次接着介绍5个更多HTML 5的API. 1 fullscreen全屏api,可惜不是全部浏览器支持,播放视频,做游戏时有用. launchFullScreen(document.documentElement); launchFullScreen(document.getElementById("videoElement")); //点单独的与元素时启动.

HTML 5中几种用于在客户端本地存储数据的API之间的比较

- - CSDN博客Web前端推荐文章
更多HTML 5文章请查阅 HTML 6在线网站http://www.html5online.com.cn.         本文将HTML 5中几种用于在客户端本地保存数据的API进行比较,这些API包括Web Storage API,Web SQL Database API,Indexed Database API与FileSystem API.

Api Blocking

- - xiaobaoqiu Blog
4.RateLimiter实现限流. 接口限流是保证系统稳定性的三大法宝之一(缓存, 限流, 降级).. 本文使用三种方式实现Api限流, 并提供了一个用Spring实现的Api限流的简单Demo, Demo的git地址: https://github.com/xiaobaoqiu/api-blocking.

股票API

- 狗尾草 - 博客园-首页原创精华区
股票数据的获取目前有如下两种方法可以获取:. http/javascript接口取数据. 1.http/javascript接口取数据. 以大秦铁路(股票代码:601006)为例,如果要获取它的最新行情,只需访问新浪的股票数据. 这个url会返回一串文本,例如:. var hq_str_sh601006="大秦铁路, 27.55, 27.25, 26.91, 27.55, 26.20, 26.91, 26.92, .

API 与 ABI

- Ant - A Geek&#39;s Page
(本文亦是《C语言编程艺术》中的一部分,所以请勿用于商业用途. 一些程序员居然对API和ABI这两个概念都不清楚,我感到有些惊讶. 这里以 Linux 内核为例简单解释一下. API,顾名思义,是编程的接口,换句话说也就是你编写“应用程序”时候调用的函数之类的东西. 对于内核来说,它的“应用程序”有两种:一种是在它之上的,用户空间的真正的应用程序,内核给它们提供的是系统调用这种接口,比如 read(2),write(2);另一种就是内核模块了,它们和内核处于同一层,内核给它们提供的是导出的内核函数,比如 kmalloc(),printk().

Google+ API发布

- 屁清新健脑 - Solidot
开发者终于等来了期待已久的Google+ API. Google正式发布了允许读取用户公开信息的API,开发者可以借助API开发与Google+交互的应用程序,或将其整合到网站上. Google社交网站发布2个月来,经历了用户暴涨,但也出现了热度下降. Google+ API的发布也许能给予它一个新动力.

API 之下

- - 阮一峰的网络日志
虽然标题里面有 API,但是本文谈的不是编程,而是更重要的事情. 很多公司的组织架构,都有一个中层. 高层领导和基层员工之间,存在大量的中层干部. 2015年,硅谷创业家 莱因哈特(Peter Reinhardt)观察到一个现象:硅谷科技公司正在变得越来越大,但是公司的中层几乎没有变大. 原因就在于,大公司正在用 API 替代掉中层干部.

HTML 安全列表

- 火锅土豆 - 酷壳 - CoolShell.cn
下面这个网站罗列了,几乎所有的关于HTML 5 在各种主流浏览器上的安全问题,这些安全问题很有可能将会是黑客攻击你的网上的敲门砖,他们几乎都和Javascript都有关系,你就要好好注意了. IE6,7,8,9,和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中,可以让用户进行XSS(跨站脚本)攻击.

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言( 英文:HyperText Markup Language,HTML)是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全,超赞.