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 timeout period.")break;case error.UNKNOWN_ERROR:alert("The position could not be determined due to an unknown error.")break;} }
页:
[1]