HTML 5中地理位置api小结

  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
;
  }
 }