HTML5實現獲取地理位置資訊並定位功能

前言

     這篇文章主要介紹了HTML5實現獲取地理位置資訊並定位功能,本文講解了原生HTML5、百度地圖、谷歌地圖等三種獲取理位置資訊並定位的方法,需要的朋友可以參考下。

HTML5提供了地理位置定位功能（Geolocation API），能確定使用者位置，我們可以藉助HTML5的該特性開發基於地理位置資訊的應用。本文結合例項給大家分享如何使用HTML5，藉助百度、谷歌地圖介面來獲取使用者準確的地理位置資訊。

如何使用HTML5地理位置定位功能

      定位功能（Geolocation

function getLocation(){ 
if (navigator.geolocation){ 
navigator.geolocation.getCurrentPosition(showPosition,showError); 
}else
 
{ 
alert("瀏覽器不支援地理定位。"); 
} 
}

      從上面的程式碼可以知道，如果使用者裝置支援地理定位，則執行 getCurrentPosition() 方法。如果getCurrentPosition()執行成功，則向引數showPosition中規定的函式返回一個coordinates物件，getCurrentPosition() 方法的第二個引數showError用於處理錯誤，它規定當獲取使用者位置失敗時執行的函式。

      我們先來看函式showError()

function showError(error){ 
switch(error.code) { 
case error.PERMISSION_DENIED: 
alert("定位失敗,使用者拒絕請求地理定位"); 
break; 
case error.POSITION_UNAVAILABLE: 
alert("定位失敗,位置資訊是不可用"); 
break; 
case error.TIMEOUT: 
alert("定位失敗,請求獲取使用者位置超時"); 
break; 
case error.UNKNOWN_ERROR: 
alert("定位失敗,定位系統失效"); 
break; 
} 
}

我們再來看函式showPosition(),呼叫coords的latitude和longitude即可獲取到使用者的緯度和經度。

function showPosition(position){ 
var lat = position.coords.latitude; //緯度 
var lag = position.coords.longitude; //經度 
alert('緯度:'+lat+',經度:'+lag); 
}

利用百度地圖和谷歌地圖介面獲取使用者地址

      上面我們瞭解了HTML5的Geolocation可以獲取使用者的經緯度，那麼我們要做的是需要把抽象的經緯度轉成可讀的有意義的真正的使用者地理位置資訊。幸運的是百度地圖和谷歌地圖等提供了這方面的介面，我們只需要將HTML5獲取到的經緯度資訊傳給地圖介面，則會返回使用者所在的地理位置，包括省市區資訊，甚至有街道、門牌號等詳細的地理位置資訊。

      我們首先在頁面定義要展示地理位置的元素，分別定義id#baidu_geo和id#google_geo。我們只需修改關鍵函式showPosition()。

  先來看百度地圖介面互動，我們將經緯度資訊通過Ajax方式傳送給百度地圖介面，介面會返回相應的省市區街道資訊。百度地圖介面返回的是一串JSON資料，我們可以根據需求將需要的資訊展示給#baidu_geo。注意這裡用到了jQuery庫，需要先載入jQuery庫檔案。

 function showPosition(position){ 
var latlon = position.coords.latitude+','+position.coords.longitude; 
//baidu 
var url = "
<ahref="http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0</a>"; 
$.ajax({ 
type: "GET", 
dataType: "jsonp", 
url: url, 
beforeSend: function(){ 
$("#baidu_geo").html('正在定位...'); 
}, 
success: function (json) { 
if(json.status==0){ 
$("#baidu_geo").html(json.result.formatted_address); 
} 
}, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
$("#baidu_geo").html(latlon+"地址位置獲取失敗"); 
} 
}); 
});

      再來看谷歌地圖介面互動。同樣我們將經緯度資訊通過Ajax方式傳送給谷歌地圖介面，介面會返回相應的省市區街道詳細資訊。谷歌地圖介面返回的也是一串JSON資料，這些JSON資料比百度地圖介面返回的要更詳細，我們可以根據需求將需要的資訊展示給#google_geo。

function showPosition(position){ 
var latlon = position.coords.latitude+','+position.coords.longitude; 
//google 
var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN'; 
$.ajax({ 
type: "GET", 
url: url, 
beforeSend: function(){ 
$("#google_geo").html('正在定位...'); 
}, 
success: function (json) { 
if(json.status=='OK'){ 
var results = json.results; 
$.each(results,function(index,array){ 
if(index==0){ 
$("#google_geo").html(array['formatted_address']); 
} 
}); 
} 
}, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
$("#google_geo").html(latlon+"地址位置獲取失敗"); 
} 
}); 
}

      以上的程式碼分別將百度地圖介面和谷歌地圖介面整合到函式showPosition()中，我們可以根據實際情況進行呼叫。當然這只是一個簡單的應用，我們可以根據這個簡單的示例開發出很多複雜的應用，建議用手機瀏覽器訪問DEMO演示。

美文美圖

再分享一下我老師大神的人工智慧教程吧。零基礎！通俗易懂！風趣幽默！希望你也加入到我們人工智慧的隊伍中來！https://www.cnblogs.com/captainbed