HTML5之地理定位（二）

從地理定位（一）了解了地理定位的原理及基本的知識(shí)，下面學(xué)習(xí)設(shè)置地理定位選項(xiàng)及地圖的顯示。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),鶴崗企業(yè)網(wǎng)站建設(shè),鶴崗品牌網(wǎng)站建設(shè),網(wǎng)站定制,鶴崗網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,鶴崗網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

設(shè)置地理定位選項(xiàng)

前面的學(xué)習(xí)已知道調(diào)用getCurrentPosition()時(shí)可以傳入兩個(gè)參數(shù)，實(shí)際上還可以設(shè)置第三個(gè)參數(shù)：

navigator.geolocation.getCurrentPosition(
      geolocationSuccess, geolocationFailure，
      {enableHighAccuracy：true，
        timeout：10000，
        maxmumAge:60000 }
);

下面解釋下第三個(gè)參數(shù)的意義：

enableHighAccuracy屬性要求高精度的GPS位置檢測。除非確實(shí)需要精確的坐標(biāo)，否則不需要設(shè)置這個(gè)項(xiàng)(在移動(dòng)手機(jī)上非常耗電)，默認(rèn)是false。
timeout屬性設(shè)置在放棄之前等待位置數(shù)據(jù)的時(shí)間，以毫秒為單位，這里10000是指用戶按下同意數(shù)據(jù)的選項(xiàng)時(shí)，最多等待10秒。否則放棄(超時(shí))。
maxmumAge屬性用于緩存位置數(shù)據(jù)，比如把maxmumAge設(shè)置為60000 毫秒，之前的數(shù)據(jù)最多保存1分鐘，之后重新獲得位置數(shù)據(jù)。這樣做，是為當(dāng)用戶處于移動(dòng)狀態(tài)時(shí)，獲得及時(shí)的位置數(shù)據(jù)(越精確的位置數(shù)據(jù))。

地圖顯示

得到了位置數(shù)據(jù)，最有用的就是把自定義的數(shù)據(jù)點(diǎn)放在地圖上。比如顯示公司的位置，或是乘車路線。下面就在地圖上顯示我當(dāng)前的位置：

鏈接到Google Maps API腳本，并把它放在使用地圖功能的自定義腳本前頭，如下：

<head>
  <meta charset="utf-8">
  <title>Geolocation Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
...
</head>

用一個(gè)<div>元素盛放動(dòng)態(tài)生成的地圖，如下：

<body>
  <p id="results">你生活在哪?</p>
  <div id="mapSurface"></div>
</body>

這樣就可以給它設(shè)置樣式，申明地圖的大小：

#mapSurface {
  width: 600px;
  height: 400px;
  border: solid 1px black;
}

使用Google Maps地圖的準(zhǔn)備工作都做好了，接下來應(yīng)該考慮顯示地圖，這個(gè)例子是在頁面加載時(shí)使用地圖。

以下是頁面加載時(shí)運(yùn)行的代碼，首先是創(chuàng)建地圖，然后通過地理定位查找用戶(這里是我)的位置：

var results;
var map;
window.onload = function() {
  results = document.getElementById("results");
  //設(shè)置地圖選項(xiàng)，這里設(shè)置了起始縮放級(jí)別和地圖類型，要詳細(xì)了//解可以看看Google Maps文檔
  var myOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
//使用前面設(shè)置的項(xiàng)來創(chuàng)建地圖
  map = new google.maps.Map(document.getElementById("mapSurface"), myOptions);
//嘗試取得用戶的位置
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      geolocationSuccess, geolocationFailure
    );
    results.innerHTML = "定位已開始.";
  } else {
    results.innerHTML = "該瀏覽器不支持地理定位";
  }
}

上面的代碼創(chuàng)建了地圖，但還不能再頁面上看到它。因?yàn)檫€沒有設(shè)置地理位置，要設(shè)置地理位置，得用Latlng對象創(chuàng)建一個(gè)坐標(biāo)點(diǎn)，然后再通過地圖的setCenter()方法把該點(diǎn)放到地圖上。以下就是使用訪客坐標(biāo)創(chuàng)建坐標(biāo)點(diǎn)并將該點(diǎn)放到地圖上的代碼：

function geolocationSuccess(position) {
//把地理定位的位置轉(zhuǎn)換為Latlng對象
      location = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
//在地圖上顯示該店
      map.setCenter(location);
}

有了這些代碼就就可以在頁面上顯示地圖了。當(dāng)然還可以在地圖上添加一些輔助功能，比如其位置和氣泡。比如創(chuàng)建信息氣泡需要?jiǎng)?chuàng)建一個(gè)Info人Window對象，下面的代碼就是在地圖上創(chuàng)建信息氣泡：

var infowindow = new google.maps.InfoWindow();
//創(chuàng)建信息氣泡并設(shè)置其文本內(nèi)容個(gè)地圖坐標(biāo)
      infowindow.setContent("我在這里或是附近");
      infowindow.setPosition(location);
//顯示地圖氣泡
      infowindow.open(map);
 results.innerHTML = "現(xiàn)在你在地圖上。";

最后如果瀏覽器不支持地理定位，處理方法于此類似，可以用一個(gè)已知的坐標(biāo)點(diǎn)(而不是獲取的位置)來創(chuàng)建地圖。

最后在瀏覽器上就可以看到如下的效果：

HTML5之地理定位（二）

好吧，雖然不準(zhǔn)確(我使用的是臺(tái)式機(jī)通過有線連接接入Internet)，但畢竟還是找出了我的大體位置。

小結(jié)：Internet的發(fā)展帶來前所未有的便利，但是這些技術(shù)的發(fā)展是我們的位置暴漏無疑，尤其是使用智能手機(jī)接入網(wǎng)時(shí)。只要你接打電話，或是上網(wǎng)，或是使用內(nèi)置GPS的設(shè)備等，我們的位置就已經(jīng)告訴了Internet。

需要學(xué)習(xí)的朋友可以下載附件。

附件：http://down.51cto.com/data/2362801

新聞標(biāo)題：HTML5之地理定位（二）
轉(zhuǎn)載源于：http://chinadenli.net/article26/jpcjjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、定制網(wǎng)站、網(wǎng)站內(nèi)鏈、動(dòng)態(tài)網(wǎng)站、網(wǎng)站維護(hù)

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

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML5之地理定位（二）