Html5——地理定位及地圖

時間 2019-12-11

標籤 html5 html 地理位及地圖欄目 HTML5 简体版

原文原文鏈接

經常使用的navigator.geolocation對象有如下三種方法： javascript

獲取當前地理位置：navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)html

持續獲取地理位置（時時定位）：navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options) java

清除持續獲取地理位置事件：navigator.geolocation.clearWatch(watch_position_id) git

其中success_callback_function爲成功以後處理的函數，error_callback_function爲失敗以後返回的處理函數，參數position_options是配置項，由JSON格式傳入： api

enableHighAccuracy：true/false，它將告訴瀏覽器是否啓用高精度設備，所謂的高精度設備包含但不侷限於前面所提到的 GPS 和 WIFI，值爲 true 的時候，瀏覽器會嘗試啓用這些設備，默認指爲 true，在這種狀況下，瀏覽器會盡量地進行更爲精確的查詢，簡單地說，若是用戶有可用的 GPS 設備，會返回 GPS 設備的查詢結果，IP 是最後的選擇，對於移動設備來講，網絡接入點(基站)或許成爲另瀏覽器

getCurrentPosition() 方法 - 返回數據

若成功，則 getCurrentPosition() 方法返回對象。始終會返回 latitude、longitude 以及 accuracy 屬性。若是可用，則會返回其餘下面的屬性。緩存

屬性	描述
coords.latitude	十進制數的緯度
coords.longitude	十進制數的經度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米計
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，從正北開始以度計
coords.speed	速度，以米/每秒計
timestamp	響應的日期/時間

檢測瀏覽器是否支持：網絡

 if (navigator.geolocation) {
    //console.log("瀏覽器支持!");
 }
else {
    // console.log("瀏覽器不支持!");
 }

void getCurrentPosition(onSuccess,onError,options);
//獲取用戶當前位置

int watchCurrentPosition(onSuccess,onError,options);
//持續獲取當前用戶位置

void clearWatch(watchId);
//watchId 爲watchCurrentPosition返回的值
//取消監控

onSuccess方法成功時調用的(必選)，onError方法失敗是調用的(可選)，options其餘參數(可選)函數

options：測試

options = {
     enableHighAccuracy,　　　//boolean 是否要求高精度的地理信息
     timeout,　　　　　　　　　//表示等待響應的最大時間，默認是0毫秒，表示無窮時間
     maximumAge　　　　　　　　/應用程序的緩存時間
}

onsuccess方法中會返回position對象，經過這個對象能夠獲取地理位置的相關信息並在百度地圖上顯示

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <title>基於瀏覽器的HTML5查找地理位置</title> 
    <!-- 百度API -->
 <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>  
  <script>

           function getLocation(){
               var options={
                   enableHighAccuracy:true, 
                   maximumAge:1000
               }
               if(navigator.geolocation){
                   //瀏覽器支持geolocation
                   navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
                   
               }else{
                   //瀏覽器不支持geolocation
               }
           }

           //成功時
           function onSuccess(position){
               //返回用戶位置
               //經度
               var longitude =position.coords.longitude;
               //緯度
               var latitude = position.coords.latitude;

               //使用百度地圖API
               //建立地圖實例  
               var map =new BMap.Map("container");

               //建立一個座標
               var point =new BMap.Point(longitude,latitude);
               //地圖初始化，設置中心點座標和地圖級別  
               map.centerAndZoom(point,15);



           }
  

           //失敗時
           function onError(error){
               switch(error.code){
                   case 1:
                   alert("位置服務被拒絕");
                   break;

                   case 2:
                   alert("暫時獲取不到位置信息");
                   break;

                   case 3:
                   alert("獲取信息超時");
                   break;

                   case 4:
                    alert("未知錯誤");
                   break;
               }

           }

           window.onload=getLocation;
   </script>
</head>
<body>
  

   <div id="container" style="width:600px;height:600px"></div>
</body>
</html>

嵌入谷歌地圖：

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

谷歌地圖腳本：

<body>
<p id="demo">點擊這個按鈕，得到您的位置：</p>
<button onclick="getLocation()">試一下</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></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>

時時定位：

Geolocation 對象 - 其餘有趣的方法

watchPosition() - 返回用戶的當前位置，並繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。

clearWatch() - 中止 watchPosition() 方法

下面的例子展現 watchPosition() 方法。您須要一臺精確的 GPS 設備來測試該例（好比 iPhone）：

實例

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.;
    }
  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>watchPosition(showPosition)

獲取當前位置加上偏移量會準一點

經度+經度校訂值： 0.008774687519;
緯度+緯度校訂值： 0.00374531687912;

百度地圖API的使用

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <title>百度地圖API的使用</title>  
    <!-- 百度地圖API-->
 <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>  
    <script type="text/javascript">  
    function initialize() {  
        //建立地圖實例  
        var map = new BMap.Map('map');  
        //建立一個座標
        var point =new BMap.Point(113.264641,23.154905);
        //地圖初始化，設置中心點座標和地圖級別  
        map.centerAndZoom(point,15);  
    }  
    window.onload = initialize;  
    </script>  
</head>  
<body>  
<!-- 百度地圖地圖容器-->
    <div id="map" style="width:500px;height:320px"></div>  
</body>  
</html>

//添加控件
map.addControl(new BMap.MapTypeControl());

MapTypeControl ---------地圖類型控件

CopyrightControl --------版權控件

ScaleControl --------比例尺控件

NavigationControl ------縮放控件

OverviewMapControl ----縮略圖控件

建立標註：

var marker = new BMap.Marker(point);  　　　　　 // 建立標註
map.addOverlay(marker);                        // 將標註添加到地圖中

建立信息窗口對象

var infoWindow = new BMap.InfoWindow("I am here");    // 建立信息窗口對象
map.openInfoWindow(infoWindow,point);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。