如何在html5獲取接口方法中返回的map信息

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

成都創(chuàng)新互聯(lián)公司是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)站備案、服務(wù)器租用、空間域名、軟件開發(fā)、小程序開發(fā)等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營(yíng)推廣經(jīng)驗(yàn)的科技公司，有著多年的網(wǎng)站建站經(jīng)驗(yàn)，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開一個(gè)面向全國乃至全球的業(yè)務(wù)窗口：建站歡迎聯(lián)系：18982081108

function getLocation(){

if (navigator.geolocation){

navigator.geolocation.getCurrentPosition(showPosition,showError);

}else{

alert("瀏覽器不支持地理定位。");

}

}

上面的代碼可以知道，如果用戶設(shè)備支持地理定位，則運(yùn)行 getCurrentPosition() 方法。如果getCurrentPosition()運(yùn)行成功，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個(gè)coordinates對(duì)象，getCurrentPosition() 方法的第二個(gè)參數(shù)showError用于處理錯(cuò)誤，它規(guī)定當(dāng)獲取用戶位置失敗時(shí)運(yùn)行的函數(shù)。

我們先來看函數(shù)showError()，它規(guī)定獲取用戶地理位置失敗時(shí)的一些錯(cuò)誤代碼處理方式：

function showError(error){

switch(error.code) {

case error.PERMISSION_DENIED:

alert("定位失敗,用戶拒絕請(qǐng)求地理定位");

break;

case error.POSITION_UNAVAILABLE:

alert("定位失敗,位置信息是不可用");

break;

case error.TIMEOUT:

alert("定位失敗,請(qǐng)求獲取用戶位置超時(shí)");

break;

case error.UNKNOWN_ERROR:

alert("定位失敗,定位系統(tǒng)失效");

break;

}

}

我們?cè)賮砜春瘮?shù)showPosition(),調(diào)用coords的latitude和longitude即可獲取到用戶的緯度和經(jīng)度。

function showPosition(position){

var lat = position.coords.latitude; //緯度

var lag = position.coords.longitude; //經(jīng)度

alert('緯度:'+lat+',經(jīng)度:'+lag);

}

利用百度地圖和谷歌地圖接口獲取用戶地址

上面我們了解了HTML5的Geolocation可以獲取用戶的經(jīng)緯度，那么我們要做的是需要把抽象的經(jīng)緯度轉(zhuǎn)成可讀的有意義的真正的用戶地理位置信息。幸運(yùn)的是百度地圖和谷歌地圖等提供了這方面的接口，我們只需要將HTML5獲取到的經(jīng)緯度信息傳給地圖接口，則會(huì)返回用戶所在的地理位置，包括省市區(qū)信息，甚至有街道、門牌號(hào)等詳細(xì)的地理位置信息。

我們首先在頁面定義要展示地理位置的div，分別定義id#baidu_geo和id#google_geo。我們只需修改關(guān)鍵函數(shù)showPosition()。先來看百度地圖接口交互，我們將經(jīng)緯度信息通過Ajax方式發(fā)送給百度地圖接口，接口會(huì)返回相應(yīng)的省市區(qū)街道信息。百度地圖接口返回的是一串JSON數(shù)據(jù)，我們可以根據(jù)需求將需要的信息展示給div#baidu_geo。注意這里用到了jQuery庫，需要先加載jQuery庫文件。

HTML5的Geolocation接口可以獲取手機(jī)的gps定位嗎？

Geolocation接口不可以獲取手機(jī)的gps定位，這個(gè)api具有自己特有的定位方式。

定位用戶的位置

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

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

用法如下：

!DOCTYPE html

html

body

p id="demo"點(diǎn)擊這個(gè)按鈕，獲得您的位置：/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是什么干什么的

HTML的全稱是超文本標(biāo)記語言，是一種標(biāo)記語言。它包括一系列標(biāo)簽，可以統(tǒng)一網(wǎng)絡(luò)上文檔的格式，將分散的互聯(lián)網(wǎng)資源連接成一個(gè)邏輯整體。HTML是由HTML命令組成的描述性文本，可以解釋文字、圖形、動(dòng)畫、聲音、表格、鏈接等。Html是一種用來描述網(wǎng)頁的語言。它被稱為超文本標(biāo)記語言，它是一種標(biāo)記語言。它包括一系列標(biāo)簽，可以統(tǒng)一網(wǎng)絡(luò)上文檔的格式，將分散的互聯(lián)網(wǎng)資源連接成一個(gè)邏輯整體。

網(wǎng)頁制作：HTML5 標(biāo)準(zhǔn)提供了哪些新的 API

以下是之前學(xué)習(xí)的一些HTML5 API的總結(jié)，在HTML5中有許多功能和接口很值得我們?nèi)チ私夂蛯W(xué)習(xí)。

頁面可見性API--page Visbility

全屏API --full Screen

獲取MediaAPI--getUserMedia

電池API --battery

資源預(yù)加載API--link Prefetching

Page Visibility 頁面可見性API

該API可以用來檢測(cè)頁面對(duì)于用戶的可見性，即返回用戶當(dāng)前瀏覽的頁面或標(biāo)簽tap的狀態(tài)變化。 在最小化瀏覽器、切換tap頁面時(shí)生效.(如需對(duì)app中幾個(gè)webview進(jìn)行切換操作時(shí)，可使用pageVisibility接口進(jìn)行相應(yīng)的事件監(jiān)聽和處理。)

page visibility的介紹

【document.hidden】 該值表示page是否是可見的,值為boolean值

【document.visibilityState】 這個(gè)visibilitystate 可有三個(gè)值得可能：

【visible】 表示該page是處于最前面的頁面并且不是處于一個(gè)最小化的窗口

【hidden】 表示該page不是處于最前面的頁面或者是處于一個(gè)最小化的窗口

【prerender】 表示該頁面內(nèi)容正在重新渲染并且該頁面對(duì)于用戶是不可見的

【isibilitychange Event】*監(jiān)聽window visibility 的改變的事件

相關(guān)代碼：

// 設(shè)置隱藏屬性和可見改變事件的名稱，屬性需要加瀏覽器前綴 // since some browsers only offer vendor-prefixed support var hidden, state, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; state = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; state = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState"; } // 添加一個(gè)標(biāo)題改變的監(jiān)聽器 document.addEventListener(visibilityChange, function(e) { // 開始或停止?fàn)顟B(tài)處理 }, false);

page visibility的用處

對(duì)于visibility的改變，我們可以怎么用了做什么呢。

我們可以對(duì)那些定期刷新內(nèi)容的頁面進(jìn)行控制，當(dāng)該頁面不可見則不刷新，可見則刷新

我們還可以根據(jù)頁面的是否可見來暫停和繼續(xù)音頻，視頻的播放

我們還可以根據(jù)頁面可見去計(jì)算我們網(wǎng)站的用戶停留在本頁面的更為精確的數(shù)據(jù)，而不僅僅是打開頁面而不停留在本頁面。

Full Screen API全屏API

該API允許開發(fā)者以編程方式將Web應(yīng)用程序全屏運(yùn)行，使Web應(yīng)用程序更像本地應(yīng)用程序。十分簡(jiǎn)單有用的api.

Full Screen 的介紹

FullScreen 的API使用非常簡(jiǎn)單，其有兩種模式

Launching Fullscreen Mode 啟動(dòng)全屏模式

// 找到適合瀏覽器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } } // 啟動(dòng)全屏模式 launchFullScreen(document.documentElement); // the whole page launchFullScreen(document.getElementById("videoElement")); // any individual element

Exit FullScreen Mode 退出全屏模式

// Whack fullscreenfunction exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } // Cancel fullscreen for browsers that support it! exitFullscreen();

Full Screen 的相關(guān)屬性和事件

目前fullscreen 仍存在兼容的問題，許多能使用的瀏覽器仍需要在其相應(yīng)的屬性和事件加相關(guān)的前綴。

【document.fullScreenElement】 該屬性表示啟動(dòng)全屏的元素（如 video這些）

【document.fullScreenEnabled】該屬性表示當(dāng)前是否全屏

【fullscreenchange 事件】 監(jiān)聽全屏狀態(tài)改變的事件

Full Scrren 的相關(guān)

css有一些關(guān)于fullscreen的css屬性

-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen, :full-screen { /*pre-spec */ /* properties */ } :fullscreen { /* spec */ /* properties */ } /* deeper elements */:-webkit-full-screen video { width: 100%; height: 100%; } /* styling the backdrop*/::backdrop { /* properties */ } ::-ms-backdrop { /* properties */ }

FullScreen的小結(jié)

第一次見到這個(gè)API是在看一些手機(jī)小說和移動(dòng)端漫畫網(wǎng)站時(shí)，發(fā)現(xiàn)其有全屏的觀看的功能。全屏api目前可能存在兼容性的問題，但相信不久的將來肯定會(huì)是一個(gè)使用頻率超高的api

getUserMedia API

該API允許Web應(yīng)用程序訪問攝像頭和麥克風(fēng)，而無需使用插件,該API在客戶端最先支持的，但在pc端仍不可用。

getUserMedia API 的介紹

先閱讀下下面的html

Snap Photo

相關(guān)JS代碼

// 設(shè)置事件監(jiān)聽器 window.addEventListener("DOMContentLoaded", function() { // 獲取元素 var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); }; // 設(shè)置video監(jiān)聽器 if(navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } }, false);

一旦確定當(dāng)前瀏覽器是支持getUserMedia的時(shí)， 我們可以同簡(jiǎn)單的方法將當(dāng)前我們的video元素的src視頻地址賦值給用戶手機(jī)本地的video，然后通過video的play方法拉起本地video的啟動(dòng)和連接。這樣的話我們就可以使用本地的播放器來播放。

電池API（Battery API）

這是一個(gè)針對(duì)移動(dòng)設(shè)備應(yīng)用程序的API，主要用于檢測(cè)設(shè)備電池信息。

Battery API 的介紹

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; // 電池屬性 console.warn("Battery charging: ", battery.charging); // 當(dāng)前電池是否在充電 true console.warn("Battery level: ", battery.level); // 0.58 console.warn("Battery discharging time: ", battery.dischargingTime); // 添加事件監(jiān)聽器 battery.addEventListener("chargingchange", function(e) { console.warn("Battery charge change: ", battery.charging); }, false);

為什么獲取電池信息的API

為什么我們需要用到battery api？現(xiàn)在許多移動(dòng)端apps都內(nèi)嵌著web瀏覽器包裝的（不再是完全native的應(yīng)用）。所以我們需要一個(gè)方法去獲取系統(tǒng)的信息，app有一些過程是`十分耗電的，然后我們就需要在用戶啟動(dòng)時(shí)給用戶一些警告信息告訴用戶當(dāng)前設(shè)備電量較低。這是一個(gè)十分重要簡(jiǎn)單的api.相應(yīng)在不久的將來會(huì)發(fā)揮應(yīng)有的作用。

Link Prefetching【預(yù)加載】

預(yù)加載網(wǎng)頁內(nèi)容為瀏覽者提供一個(gè)平滑的瀏覽體驗(yàn)。這個(gè)api我們?cè)跇I(yè)務(wù)偶爾也會(huì)使用到

什么是link預(yù)加載

Link prefetching 是利用瀏覽器最佳的時(shí)間去下載或者預(yù)加載一些用戶可能將會(huì)在不久將來瀏覽的文檔的一種瀏覽器機(jī)制。

!-- full page --] [link rel="prefetch" href="" /] [!-- just an image --] [link rel="prefetch" href="" /]

什么時(shí)候使用link預(yù)加載是否在自己的網(wǎng)站使用預(yù)加載，可以參考一下幾點(diǎn)：

當(dāng)你做的是一種類似slideshow的網(wǎng)頁，需要提前加載近1-3張頁面（假設(shè)這些頁面并不大）

預(yù)先加載在網(wǎng)站中許多網(wǎng)頁都會(huì)用到的圖片

預(yù)先加載網(wǎng)站搜索的結(jié)果的頁面

html5調(diào)用json數(shù)據(jù)接口怎么寫

HTML5中可以通過localStorage數(shù)據(jù)與JSON對(duì)象的轉(zhuǎn)換，快速實(shí)現(xiàn)存儲(chǔ)更多數(shù)據(jù)的功能。

將localStorage數(shù)據(jù)轉(zhuǎn)成JSON對(duì)象，需要調(diào)用JSON對(duì)象的parse()方法，JSON.parse(data)。其中data就是localStorage對(duì)象獲取的數(shù)據(jù)，調(diào)用該方法將返回一個(gè)裝載data數(shù)據(jù)的JSON對(duì)象。

通過stringify()方法，將一個(gè)實(shí)體對(duì)象轉(zhuǎn)換為JSON格式的文本數(shù)據(jù)，JSON.stringify(obj)。obj表示任意一個(gè)實(shí)體對(duì)象，該方法返回一個(gè)由實(shí)體對(duì)象轉(zhuǎn)成JSON格式的文本數(shù)據(jù)集。

下例所示：

function addStu(){

var sno=$$("sno").value,

name=$$("name").value,

sex=$$("sex").value,

score=$$("score").value;

//聲明一個(gè)實(shí)體對(duì)象，將學(xué)生的信息當(dāng)作對(duì)象的成員

var

dataSet=new Object;

dataSet.sno=sno;

dataSet.name=name;

dataSet.sex=sex;

dataSet.score=score;

//把dataSet這個(gè)對(duì)象轉(zhuǎn)換成JSON格式的文本數(shù)據(jù)

var

list=JSON.stringify(dataSet);

localStorage.setItem(sno,list);

getlocalData();

}

function getlocalData(){

var addInfo="";

for(var i=0;i

var key=localStorage.key(i);

//把json格式的字符串轉(zhuǎn)換成JSON對(duì)象

var

dataSet=JSON.parse(localStorage.getItem(key));

addInfo+="

"+dataSet.sno

+""+dataSet.name

+""+dataSet.sex

+""+dataSet.score

+"";

$$("allInfo").innerHTML=addInfo;

}

}

html5定義中api是什么意思?

api就是接口，html里面的api也不例外，也是些編程接口，是你訪問一些編碼指令和一些標(biāo)準(zhǔn)的一個(gè)接口一個(gè)集合，就跟插座一樣，是電和電器的一個(gè)接口。比如html5里面的canvas，是繪圖的一個(gè)api，html5獲取地理位置的api，即時(shí)通信的api，文件讀取api等等，通過這些api來訪問標(biāo)準(zhǔn)里面的指令編碼，來操縱相應(yīng)的操作。

網(wǎng)站標(biāo)題：html5接口,html5模塊
URL鏈接：http://chinadenli.net/article48/pheoep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、企業(yè)建站、App設(shè)計(jì)、商城網(wǎng)站、微信小程序、網(wǎng)站制作

廣告

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