站長資訊網
最全最豐富的資訊網站

html5 navigator.geolocation基于瀏覽器獲取地理位置代碼案例

一、簡介

html5為window.navigator提供了geolocation屬性,用于獲取基于瀏覽器的當前用戶地理位置。

window.navigator.geolocation提供了3個方法分別是:

void getCurrentPosition(onSuccess,onError,options);  //獲取用戶當前位置    int watchCurrentPosition(onSuccess,onError,options);  //持續獲取當前用戶位置    void clearWatch(watchId);  //watchId 為watchCurrentPosition返回的值  //取消監控      options = {       enableHighAccuracy,//boolean 是否要求高精度的地理信息       timeout,//獲取信息的超時限制       maximumAge//對地理信息進行緩存的時間  }  //options可以不寫,為默認即可

二、position對象

當成功獲取地理位置信息時候,onsuccess方法中會返回position對象,通過這個對象可以獲取地理位置的相關信息,包括:

position對象的屬性:     latitude,//緯度    longitude,//經度    altitude,//海拔高度    accuracy,//獲取緯度或者經度的精度    altitudeAccurancy,//海拔高度的精度    heading,//設備前景方向。正北方向的順時針旋轉角    speed,//設備的前進速度 m/s    timestamp,//獲取地理位置信息時候的時間

三、基于google map的例子

直接看代碼:

<!DOCTYPE HTML>  <html>  <head>      <meta charset="UTF-8">      <title>在頁面上使用google地圖示例</title>  </head>  <body onload = 'init()'>      <div id="map" style='width:800px;height:800px;'></div>      <script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script>      <script type="text/javascript">          function init(){              if(navigator.geolocation){                  navigator.geolocation.getCurrentPosition(function(pos){                          var coords = pos.coords;                          var latlng =new google.maps.LatLng(coords.latitude,coords.longitude);                          var options = {zoom:14,center:latlng,mapTypeId : google.maps.MapTypeId.ROADMAP};                          var map1;                          map1 =new google.maps.Map(document.getElementById('map'),options);                          var marker =new google.maps.Marker({                                  position : latlng,                                  map : map1                                  });                          var infowindow =new google.maps.InfoWindow({                                 content : '當前位置!'                                 });                          infowindow.open(map1,marker);                          });              }          }      </script>        </body>  </html>

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
亚洲AV永久精品爱情岛论坛| 99re热精品视频国产免费| 亚洲国产美女精品久久| 日韩精品中文字幕在线观看| 久久99精品久久只有精品 | 亚洲 日韩 色 图网站| 91久久精品国产免费直播| 午夜精品久久久久久中宇| 精品一区精品二区| 亚洲av永久无码精品网址| 久久精品国产一区| 日韩精品视频免费观看| 国产亚洲蜜芽精品久久| 91精品福利在线观看| 无码人妻精品中文字幕免费 | 国产精品va无码一区二区| 国产揄拍国产精品| 日韩成视频在线观看| 亚洲宅男精品一区在线观看| 成人精品视频99在线观看免费 | 国产精品久操视频| 国产精品成人免费综合| 91亚洲国产成人精品下载| 精品国产一区二区三区在线观看| 国产精品国语自产拍在线观看| 久久99国产精品尤物| 亚洲AV永久无码精品成人| 久久se精品一区精品二区| 国产精品无码久久久久久| 日韩精品久久一区二区三区| 日韩久久无码免费毛片软件| 国产精品成人不卡在线观看| 91精品国产高清久久久久久91 | 78成人精品电影在线播放| 78成人精品电影在线播放| 久久久久se色偷偷亚洲精品av| 97久久国产露脸精品国产| 麻豆国产96在线日韩麻豆| 日韩国产免费一区二区三区| 日韩精品视频在线播放| www.午夜精品|