html5中自然地理部位精准定位api插口开发设计运用

2020-10-13 02:08 jianzhan
自然地理部位精准定位的几种方法:IP详细地址,GPS,Wifi,GSM/CDMA

自然地理部位获得步骤
1、客户开启必须获得自然地理部位的web运用。
2、运用向访问器恳求自然地理部位,访问器弹出了解,了解客户是不是共享资源自然地理部位。
3、假定客户容许,访问器从设别查寻有关信息内容。
4、访问器将有关信息内容推送到1个信赖的部位服务器,服务器回到实际的自然地理部位。

HTML5自然地理影响力的完成
1. 完成根据访问器(不用后端开发适用)获得客户的自然地理部位技术性
2. 精准精准定位客户的自然地理部位( 精度最高达10m以内,依靠机器设备 )
3. 不断跟踪客户的自然地理部位
4. 与 Google Map、或 Baidu Map 互动展现部位信息内容

Geolocation API 用于将客户当今自然地理部位信息内容共享资源给信赖的站点,这涉及到客户的隐私保护安全性难题,因此当1个站点必须获得客户确当前自然地理部位,访问器会提醒客户是“容许” or “回绝”。
先看看哪些访问器适用Geolocation API:
IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+
Geolocation API存在于navigator目标中,只包括3个方式:

拷贝编码
编码以下:

1、getCurrentPosition //当今部位
2、watchPosition //监控部位
3、clearWatch //消除监控
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;
}
});

watchPosition像1个跟踪器与clearWatch成对。
watchPosition与clearWatch有点像setInterval和clearInterval的工作中方法。
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );

HTML 5出示了自然地理部位等1系列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");
}
}

当得到自然地理部位取得成功后,会造成1个回调函数方式了,解决回到的結果,

拷贝编码
编码以下:

function setLocation(val, e) {
document.getElementById(e).value = val;
}
function successCallback(position)
{
setLocation(position.coords.latitude, "latitude"); setLocation(position.coords.longitude, "longitude");
}

3、1个很普遍的难题,是怎样追踪客户持续转变的自然地理部位,这里小结下在其中用到的两个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;
}
}