html5實現(xiàn)地圖上定位導航路線

html5實現(xiàn)地圖上定位導航路線方法如下：

創(chuàng)新互聯(lián)公司專注于靜安網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供靜安營銷型網(wǎng)站建設(shè)，靜安網(wǎng)站制作、靜安網(wǎng)頁設(shè)計、靜安網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務(wù)，打造靜安網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供靜安網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

1.先通過百度拾取坐標系統(tǒng)獲得點位的坐標。

2.在網(wǎng)頁的head中插入百度API引用腳本。

script type="text/javascript" src="

key=v=1.1services=true"/script

3.在網(wǎng)頁的/body之后/html之前插入地圖顯示代碼。

4.設(shè)置顯示地圖的div的id為“dituContent”，即添加 id="dituContent"

由于jqm的div的高度都是根據(jù)內(nèi)容自由放大的，所以為了地圖能正常顯示，還需要

增加一個高度值，一般情況600px就可以，完成。

html5的地理定位功能getCurrentPosition還能用嗎

可以使用的。

HTML5 Geolocation（地理定位）用于定位用戶的位置。

HTML5 Geolocation API 用于獲得用戶的地理位置。

鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。

瀏覽器支持

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

注釋：對于擁有 GPS 的設(shè)備，比如 iPhone，地理定位更加精確。

實例

script

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition);

}

else{x.innerHTML="Geolocation is not supported by this browser.";}

}

function showPosition(position)

{

x.innerHTML="Latitude: " + position.coords.latitude +

"br /Longitude: " + position.coords.longitude;

}

/script

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

地理位置獲取流程：

1、用戶打開需要獲取地理位置的web應(yīng)用。

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

3、假設(shè)用戶允許，瀏覽器從設(shè)別查詢相關(guān)信息。

4、瀏覽器將相關(guān)信息發(fā)送到一個信任的位置服務(wù)器，服務(wù)器返回具體的地理位置。

檢測瀏覽器支持：

JavaScript Code復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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

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

latitude——緯度

longitude——精度

accuracy——精確度，單位米

altitude——高度，單位米

altitudeAccuracy——高度的精確地，單位米

heading—運動的方向，相對于正北方向的角度

speed——運動的速度（假設(shè)你在地平線上運動），單位米/秒

回調(diào)函數(shù)handleLocationError接受錯誤對象，error.code是如下錯誤號。

UNKNOWN_ERROR (error code 0) —— 錯誤不在如下三種之內(nèi)，你可以使用error.message獲取錯誤詳細信息。

如何利用html5進行地理定位

HTML5 Geolocation（地理定位）用于定位用戶的位置

!DOCTYPE html

html

body

p id="demo"點擊這個按鈕，獲得您的位置：/p

button onclick="getLocation()"試一下/button

div id="mapholder"/div

script src=""/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

html5的地理定位功能getCurrentPosition還能用嗎？

能用，可以實現(xiàn)的，HTML5可以使用手機的GPS信息，利用百度等地圖的開放API就可以了。

HTML5中可以通過IP，WIFI信息，GPS，來實現(xiàn)地理定位，當然相關(guān)精度也是有所不同，所以如果要精確導航就得使用GPS信息。

下面是一段HTML5結(jié)合百度地圖API來獲取位置的代碼：

div id="allmap"/div當前定位地址：a id="du-gps"/aspan/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);

$("#du-gps").text(addComp.district+addComp.street+addComp.streetNumber);

});

}

else {

alert('failed'+this.getStatus());

}

},{enableHighAccuracy: true})

/script

html5地理定位api怎么連接百度地圖

可以實現(xiàn)的，HTML5可以使用手機的GPS信息，利用百度等地圖的開放API就可以了。

HTML5中可以通過IP，WIFI信息，GPS，來實現(xiàn)地理定位，當然相關(guān)精度也是有所不同，所以如果要精確導航就得使用GPS信息。

下面是一段HTML5結(jié)合百度地圖API來獲取位置的代碼：

div id="allmap"/div當前定位地址：a id="du-gps"/aspan/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);

$("#du-gps").text(addComp.district+addComp.street+addComp.streetNumber);

});

}

else {

alert('failed'+this.getStatus());

}

},{enableHighAccuracy: true})

/script

網(wǎng)站題目：百度html5定位,html 定位
URL網(wǎng)址：http://chinadenli.net/article8/dsdcpop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站策劃、品牌網(wǎng)站設(shè)計、響應(yīng)式網(wǎng)站、商城網(wǎng)站、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)