基於百度地圖的html5地理位置定位實例
Ⅰ html5怎麼實現調用gps獲取地理位置具體代碼
1、網路直接搜【網路地圖調用】,點擊出現的第二個網站,進入這個網站即可回。
Ⅱ html5如何實現地理位置定位原理
html5實現地理位置定位原理如下:
Ⅲ 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>
Ⅳ 怎樣使用HTML5地理位置定位功能
HTML5本身提供了地理位置定位功能,能確定用戶位置,藉助網路、谷歌回地圖介面來獲取答用戶准確的地理位置信息,開發基於地理位置信息的應用。
在支持HTML5的現代瀏覽器上運行,特別是手持設備,地理定位更加精確。首先我們要檢測用戶設備瀏覽器是否支持地理定位,如果支持則獲取地理信息。注意這個特性可能侵犯用戶的隱私,除非用戶同意,否則用戶位置信息是不可用的,所以我們在訪問該應用時會提示是否允許地理定位,我們當然選擇允許即可。
Ⅵ html5的地理定位功能getCurrentPosition還能用嗎
能用,可以實現的,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>
Ⅶ html5實現地圖上定位導航路線
HTML5+JQM即可實現
參考方法:
1.先去通過網路拾取坐標系統獲得點位的坐標
http://api.map..com/lbsapi/getpoint/index.html
2.在網頁的<head>中插入網路API引用腳本。
<script type="text/javascript" src="http://api.map..com/api?
key=&v=1.1&services=true"></script>
3.在網頁的</body>之後</html>之前插入地圖顯示代碼
4.設置顯示地圖的div的id為「dituContent」,即添加 id="dituContent"
由於jqm的div的高度都是根據內容自由放大的,所以為了地圖能正常顯示,還需要
增加一個高度值,一般情況600px就可以
注意事項:
1. var point = new BMap.Point(120.524011,36.395728); 這是定義中心店坐標
2. map.centerAndZoom(point,15); 這個據我調試 應該是控制地圖比例縮放的
3. window.setTimeout(function(){map.panTo(point);}, 1000);注意了 一般的
demo是沒有這個東西滴,所以呢當跳轉到地圖的頁面時候 是不會顯示你定位的中心
點的 但是由於我的聰明和機智 各種裝孫子求助大神 才得知了這個大神不削一顧
的屬性 :設定地圖載入後1秒調至中心點 。。最後強調下
低調 一定要低調。。。
4. function createIcon(json){
var icon = new BMap.Icon("images/map_icon.png", new BMap.Size
(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-
json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size
(json.x,json.h)})
return icon;
} 這里就是創建一個icon
5. var markerArr = [{title:"西程村",content:"青島市即墨市藍鰲路 電話:
123123123213",point:"120.524011|36.395728",isOpen:0,icon:
{w:32,h:32,l:0,t:0,x:6,lb:5}}]; 這里呢 就是設置定位的信息
Ⅷ 如何使用HTML5地理位置定位功能
地理位置獲取流程:
1、用戶打開需要獲取地理位置的應用。
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網頁中獲取百度地區顯示用戶當前地理位置,並且顯示出位置坐標點。
在支持html5地理定位API的瀏覽器上,.navigator對象新增了一個geolocation屬性,以及相關的Geolocation API。都是用JS進行訪問的。
下面是一個例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地理位置</title>
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(
function(position){
var cords = position.coords;
alert("當前經度:"+cords.longtitude +", 緯度:"+cords.latitude);
},
function(error){
var errorTypes={1:"位置服務被拒絕", 2:"獲取不到位置信息", 3:"獲取位置信息超時"};
alert( errorTypes[error.code] +":,不能確定當前地理位置");
}
);
</script>
</body>
</html>
這只是一個例子,一般用經度和緯度調用地圖如網路地圖的API顯示。
注意:在電腦本機上沒法測試,一般把網頁放到伺服器上,用手機訪問可以定位。
Ⅹ html5地理定位api怎麼連接百度地圖
可以實現的,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>