知识点
相关文章
更多最近更新
更多HTML5 地理位置定位 API 接口开发
2019-03-12 20:41|来源: 领悟书生
HTML5地理位置定位API接口开发包括：地理位置定位原理与介绍和HTML5中地理位置定位的方法，最后获取经纬度显示当前位置在百度地图上
地理位置定位原理与介绍
地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA
地理位置获取流程：
1、用户打开需要获取地理位置的web应用。
2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。
3、假设用户允许，浏览器从设别查询相关信息。
4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。
1. 实现基于浏览器（无需后端支持）获取用户的地理位置技术
2. 精确定位用户的地理位置( 精度最高达10m之内，依赖设备)
3. 持续追踪用户的地理位置
4. 与 Google Map、或者 BaiduMap 交互呈现位置信息。
HTML5中地理位置定位的方法
关于 Geolocation对象
Geolocation API 用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许”or “拒绝”。
先看看哪些浏览器支持GeolocationAPI：
IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+
if(navigator.geolocation){
alert("支持");
}else{
alert("不支持");
}GeolocationAPI存在于navigator对象中，只包含3个方法：
1、getCurrentPosition //当前位置
2、watchPosition //监视位置
3、clearWatch //清除监视
getCurrentPosition(success,error,option)方法最多可以有三个参数：
第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数；
第二个参数用于捕获获取位置信息出错的情况，
第三个参数是配置项。
navigator.geolocation.getCurrentPosition( … , function(error){
switch(error.code){
case error.TIMEOUT :
alert( " 连接超时，请重试 " );
break;
case error.PERMISSION_DENIED :
alert( " 您拒绝了使用位置共享服务，查询已取消 " );
break;
case error.POSITION_UNAVAILABLE :
alert( " ，抱歉，暂时无法为您所在的星球提供位置服务 " );
break;
}
});navigator.geolocation.getCurrentPosition( … , … , option);
option配置项,第三个参数是一个对象，该对象影响了获取位置时的一些细节。
enableHighAccuracy ，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备，默认指为 true。
timeout，超时，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。 这样我们尝试修改调用 getCurrentPosition 时传递的参数 watchPosition像一个追踪器与clearWatch成对。
watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。
var watchPositionId = navigator.geolocation
.watchPosition(success_callback,
error_callback, options);
navigator.geolocation.clearWatch(watchPositionId ); 利用HTML5和百度地图API实现地理定位
完整源码：
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>HTML5 地理位置定位 API 接口开发</title>
<script type="text/javascript"
src="http://api.map.baidu.com/api?key=&v1=1.1&services=true">
</script>
</head>
<body>
<div style="width:697px;height:550px;border: #ccc solid 1px;"
id="mapContent"></div>
<script type="text/javascript">
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function(p){
var latitude = p.coords.latitude;
var longitude = p.coords.longitude;
createMap(latitude,longitude);
},
function(e){
var msg = e.code+"\n"+e.message;
}
);
}else{
alert("不支持");
}
function createMap(a,b){
var map = new BMap.Map("mapContent");
var point = new BMap.Point(b,a);
map.centerAndZoom(point,20);
window.map=map;
}
</script>
</body>
</html> 看看效果：
在电脑上显示的地理位置不是很准确，不知手机上怎样。
本文链接：HTML5 地理位置定位 API 接口开发，由领悟书生原创
转载请注明出处【http://www.656463.com/article/336】
相关问答
更多-
您必须明确允许Mobile Chrome在ios中使用位置服务。 在ios6中，您可以通过转到设置 - >隐私 - >定位服务并将Chrome切换为开启来实现此目的。 You have to explicitly allow Mobile Chrome to use Location Services in ios. In ios6 you can achieve this by going to Settings->Privacy->Location Services and toggling Chrom ...
-
您正在寻找hasrsine公式 查看此网页以获取它的Javascript应用程序 You are looking for the haversine formulae Check this webpage for a Javascript application of it
-
HTML5地理位置如何工作？(How does HTML5 Geolocation Work?)[2022-09-13]
对于什么是值得的，API规范本身对地理位置实现是不可知的。 因此，尽管Mozilla Firefox和Google Chrome都可以通过Google的位置服务数据库来依靠网络启用的地理位置，但这并不是标准的要求。 例如，在某些情况下，iPhone上的Mobile Safari将在某些情况下使用GPS而不是WiFi三角测量或小区站点地理位置，这取决于在特定时刻什么位置服务是最准确和可访问的。 而且我们希望未来的浏览器能够提供一些位置提供商的选择。 我同意，如果浏览器支持不需要向第三方发送WiFi ID列表的 ... -
你不能在这里使用你的Rails助手方法。 在将脚本发送给用户之前完成服务器端呈现。 所以，即使你使用插值<%= get_station(location) %>也会返回错误的结果。 navigator.geolocation.getCurrentPosition是异步的 - 在用户允许地理定位之前，实际上不会调用回调。 而是让客户端将ajax请求发送到google maps API： setLocation = (position) -> uri = 'https://maps.googleapis.c ...
-
嗨，我在同一台设备上遇到了类似的问题： 我把它设为： {enableHighAccuracy: true}. 弗拉基米尔 It turned out to be a operating system issue, I guess. The latest update for that phone doesn't have the issue anymore. I had tried the enableHighAccuracy: true option, but that didn't make any ...
-
要在浏览器中获取GPS位置，您必须使用Geolocation API。 没有它，没有其他方法可以获得确切的位置。 To get the GPS Location in an Browser you have to use the Geolocation API. There is no other way to get the exact Location without it.
-
没有这样的事件以您从Web应用程序代码中看到的方式暴露出来。 当然，标准Geolocation API规范中没有定义此类事件。 而且我不相信任何浏览器都会公开任何非标准事件。 因此，我认为您无法自动重新触发对enableWatchPosition()函数的调用。 我确信这不是你所希望的答案，但它就是答案。 :-( There is no such event that’s exposed in a way you could see from your Web-application code. Certa ...
-
根据Geolocation API规范 ，没有任何功能。 即使将其保存在浏览器首选项中的选项也不会推送到您的代码中。 如果它真的很重要并且你真的必须意识到这一点，你必须为每个常见的浏览器编写一个浏览器插件并要求用户安装它。 但我不会怀疑它。 According to the Geolocation API Specification there isn't any function for this. Even the option to save it in the browser preferences ...
-
HTML5查找附近的地理位置(HTML5 Find nearby geolocation)[2023-08-30]
如果您要构建汽车租赁地点数据库，MongoDB具有内置的地理定位/地理空间查询功能。 在一般意义上，听起来您需要购买或租用代理商列表，将其转换为数据库格式，然后在您的html中使用地理查询查询该数据库。 If you are going to be building a database of car rental locations, MongoDB has built-in geolocation / geospatial query capabilities. In a general sense, ... -
比较PhoneGap和HTML5 API的地理位置和在线状态(Comparing PhoneGap and HTML5 APIs for geolocation and online status)[2022-05-15]
正如您可以阅读文档 此API基于W3C地理位置API规范，仅在尚未提供实现的设备上执行。 如果设备本身不支持该方法，则用于提供向后兼容性。 navigator.geolocation是HTML5引入的标准。 如果您在不支持此新标准的浏览器上尝试navigator.geolocation ，您将收到undefined 。 PhoneGap现在可以帮助您模拟这些（旧）浏览器的navigator.geolocation 。 api与W3C规范完全相同 。 如果浏览器支持HTML5地理位置api，PhoneGap只 ...