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

已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐

• —软件人才免语言低担保 赴美带薪读研！—