HTML 5中地理位置api小结

jackyrong

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