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.

开源地理位置数据库:tile38

- - 标点符
Tile38是地理定位数据存储,空间索引和实时地理围栏. 它支持多种对象类型,包括纬度/经度点,边界框,XYZ平铺,Geohashes和GeoJSON. 地理空间索引,支持类似附近、包含、相交... 通过 webhooks或 pub/sub channels实现实时地理围栏. 支持多种对象: lat/lon,  bbox,  Geohash,  GeoJSON,  QuadKey, and  XYZ tile..

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  点击打开链接 {语法大全,超赞.

html嵌套规则

- - Web前端 - ITeye博客
转载: http://www.studyofnet.com/news/412.html. 一、HTML 标签包括 块级元素(block)、内嵌元素(inline). 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签:. 一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,下面这些标签都属于内嵌元素:.

Html 转换成PDF

- - 编程语言 - ITeye博客
最近在搞一个关于html转换为pdf的需求,网上找了很多,但是如果批量处理就会出现问题,最后找到了PD4ML,解决了我的问题. String urlstring = "file:///D:/债权转让及受让协议--魏然2014-08-16.html";. 需要在src目录下创建fonts文件夹,并且在文件夹中建立pd4fonts.properties ,配置文件中的内容如下.

HTML+CSS小结 - jessies

- - 博客园_首页
   结构   HTML        .    样式   CSS      .    行为   JavaScript(交互行为).    .    网页标题.    标题.