當前位置：首頁 » 編程語言 » html地理定位

html地理定位

發布時間: 2021-03-26 06:35:08

A. html5提供的地理定位功能能實現精確導航嗎

可以實現的，HTML5可以使用手機的GPS信息，利用網路等地圖的開放API就可以了。
HTML5中可以通過IP，WIFI信息，GPS，來實現地理定位，當然相關精度也是有所不同，所以如果要精確導航就得使用GPS信息。
下面是一段HTML5結合網路地圖API來獲取位置的代碼：

<div id="allmap"></div>當前定位地址：<a id="-gps"></a><span></span></div>
<script>
var map = new BMap.Map("allmap");
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
map.panTo(r.point);
//alert('您的位置：'+r.point.lng+','+r.point.lat);
var pt = r.point;
var geoc = new BMap.Geocoder();
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
$("#-gps").text(addComp.district+addComp.street+addComp.streetNumber);
});
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
</script>

B. 如何使用html5地理定位api有哪些

html5中地理位置定位的方法

Geolocation API存在於navigator對象中，只包含3個方法：
1、getCurrentPosition //當前位置版
2、watchPosition //監視權位置
3、clearWatch //清除監視

getCurrentPosition(success,error,option)方法最多可以有三個參數：

第一個參數是成功獲取位置信息的回調函數，它是方法唯一必須的參數；
第二個參數用於捕獲獲取位置信息出錯的情況，
第三個參數是配置項。

C. html5+怎麼獲取當前地理位置

定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的現代瀏覽器上運行，特別是手持設備如iphone，地理定位更加精確。首先我們要檢測用戶設備瀏覽器是否支持地理定位，如果支持則獲取地理信息。注意這個特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的，所以我們在訪問該應用時會提示是否允許地理定位，我們當然選擇允許即可。

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獲取到的經緯度信息傳給地圖介面，則會返回用戶所在的地理位置，包括省市區信息，甚至有街道、門牌號等詳細的地理位置信息。
我們首先在頁面定義要展示地理位置的div，分別定義id#_geo和id#google_geo。我們只需修改關鍵函數showPosition()。先來看網路地圖介面交互，我們將經緯度信息通過Ajax方式發送給網路地圖介面，介面會返回相應的省市區街道信息。網路地圖介面返回的是一串JSON數據，我們可以根據需求將需要的信息展示給div#_geo。注意這里用到了jQuery庫，需要先載入jQuery庫文件。

function showPosition(position){
var latlon = position.coords.latitude+','+position.coords.longitude;

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

再來看谷歌地圖介面交互。同樣我們將經緯度信息通過Ajax方式發送給谷歌地圖介面，介面會返回相應的省市區街道詳細信息。谷歌地圖介面返回的也是一串JSON數據，這些JSON數據比網路地圖介面返回的要更詳細，我們可以根據需求將需要的信息展示給div#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+"地址位置獲取失敗");
}
});
}

D. 在html頁面點擊按鈕時如何獲取當前地理位置，如圖：

在支持html5地理定位API的瀏覽器上，window.navigator對象新增了一個geolocation屬性，以及相關的Geolocation API。都是用JS進行訪問的。

下面是一個例子：

<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>地理位置</title>
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(
function(position){
varcords=position.coords;
alert("當前經度："+cords.longtitude+",緯度："+cords.latitude);
},
function(error){
varerrorTypes={1:"位置服務被拒絕",2:"獲取不到位置信息",3:"獲取位置信息超時"};
alert(errorTypes[error.code]+":,不能確定當前地理位置");
}
);
</script>
</body>
</html>

這只是一個例子，一般用經度和緯度調用地圖如網路地圖的API顯示。

注意：在電腦本機上沒法測試，一般把網頁放到伺服器上，用手機訪問可以定位。

E. 如何利用html5進行地理定位

HTML5 Geolocation（地理定位）用於定位用戶的位置
<!DOCTYPE html>
<html>
<body>
<p id="demo">點擊這個按鈕，獲得您的位置：</p>
<button onclick="getLocation()">試一下</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}

function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';

var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</body>
</html>

F. 怎樣使用HTML5地理位置定位功能

HTML5本身提供了地理位置定位功能，能確定用戶位置，藉助網路、谷歌地圖介面來獲取用戶准確的地理位置信息，開發基於地理位置信息的應用。
在支持HTML5的現代瀏覽器上運行，特別是手持設備，地理定位更加精確。首先我們要檢測用戶設備瀏覽器是否支持地理定位，如果支持則獲取地理信息。注意這個特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的，所以我們在訪問該應用時會提示是否允許地理定位，我們當然選擇允許即可。

G. html5如何實現地理位置定位原理

html5實現地理位置定位原理如下：

H. html5使用地理定位時總是無法獲取位置

跟例子沒關系，，，是最近GOOGLE被封的原因。。。。

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

地理位置獲取流程：

1、用戶打開需要獲取地理位置的web應用。

2、應用向瀏覽器請求地理位置，瀏覽器彈出詢問窗口，詢問用戶是否共享地理位置。

3、假設用戶允許，瀏覽器從設別查詢相關信息。

4、瀏覽器將相關信息發送到一個信任的位置伺服器，伺服器返回具體的地理位置。

檢測瀏覽器支持：

JavaScript Code復制內容到剪貼板

function loadDemo() {
if(navigator.geolocation) {
document.getElementById(「support」).innerHTML = 「HTML5 Geolocation supported.」;

} else {
document.getElementById(「support」).innerHTML = 「HTML5 Geolocation is not supported in
your browser.」;
}
}

位置請求方式：

單次請求

JavaScript Code復制內容到剪貼板

navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, options);

回調函數updateLocation接受一個對象參數，表示當前的地理位置，它有如下屬性：

latitude——緯度
longitude——精度
accuracy——精確度，單位米
altitude——高度，單位米
altitudeAccuracy——高度的精確地，單位米
heading—運動的方向，相對於正北方向的角度
speed——運動的速度（假設你在地平線上運動），單位米/秒

回調函數handleLocationError接受錯誤對象，error.code是如下錯誤號。

UNKNOWN_ERROR (error code 0) —— 錯誤不在如下三種之內，你可以使用error.message獲取錯誤詳細信息。
PERMISSION_DENIED (error code 1)—— 用不選擇不共享地理位置
POSITION_UNAVAILABLE (error code 2) ——無法獲取當前位置
TIMEOUT (error code 3) ——在指定時間無法獲取位置會觸發此錯誤。

第三個參數options是可選參數，屬性如下：

enableHighAccuracy——指示瀏覽器獲取高精度的位置，默認為false。當開啟後，可能沒有任何影響，也可能使瀏覽器花費更長的時間獲取更精確的位置數據。
timeout——指定獲取地理位置的超時時間，默認不限時。單位為毫秒。
maximumAge——最長有效期，在重復獲取地理位置時，此參數指定多久再次獲取位置。默認為0，表示瀏覽器需要立刻重新計算位置。

閱讀全文

html地理定位

與html地理定位相關的閱讀推薦