手機端APP/ 手機瀏覽器 Html5自動定位城市

第一步:簡單瞭解javascript

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

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

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

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

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

 

支持參數://options能夠不寫,爲默認便可api

options = {      enableHighAccuracy,//boolean 是否要求高精度的地理信息      timeout,//獲取信息的超時限制      maximumAge//對地理信息進行緩存的時間 }瀏覽器

 

 

第二步:Html 5 geolocation 實例代碼以下:緩存

$(document).bind("pageinit", function (event, data) {   函數

    getLocation();

});

function getLocation() {

    if (navigator.geolocation) {    

        navigator.geolocation.getCurrentPosition(

                                 showPosition,//成功回調函數

                                getPositionError,//失敗回調函數

                                    {//options參數配置

                                     enableHighAccuracy:true,//boolean 是否要求高精度的地理信息 

                                      timeout:2000, 

                                        maximumAge:36000

                                    }

);

    }

    else {  //不支持,就拉倒吧。 }

}

//失敗回調函數:

function getPositionError(error){  

    switch(error.code){  

        case error.TIMEOUT:  

          //  alert("鏈接超時,請重試");  

            break;  

        case error.PERMISSION_DENIED:  

            //alert("您拒絕了使用位置共享服務,查詢已取消");  

            break;  

        case error.POSITION_UNAVAILABLE:  

            //alert("親愛的火星網友,很是抱歉,咱們暫時沒法爲您所在的星球提供位置服務");  

            break;  

    }  

}  

//成功回調函數:

function showPosition(position) {

//內容在下面說。

}

成功返回的結果說明position:

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

 position對象的屬性:

latitude,//緯度

longitude,//經度

altitude,//海拔高度

accuracy,//獲取緯度或者經度的精度

altitudeAccurancy,//海拔高度的精度

heading,//設備前景方向。正北方向的順時針旋轉角

speed,//設備的前進速度 m/s

timestamp,//獲取地理位置信息時候的時間

 

第三步:根據經緯度 調用google接口獲取

 

googlemap.js:

window.google = window.google || {}; google.maps = google.maps || {}; (function() {     function getScript(src) {     document.write('<' + 'script src="' + src + '"' +                    ' type="text/javascript"><' + '/script>');   }     var modules = google.maps.modules = {};   google.maps.__gjsload__ = function(name, text) {     modules[name] = text;   };     google.maps.Load = function(apiLoad) {     delete google.maps.Load;     apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@262000000\u0026src=api\u0026hl=zh-CN\u0026","http://mt1.googleapis.com/vt?lyrs=m@262000000\u0026src=api\u0026hl=zh-CN\u0026"],null,null,null,null,"m@262000000",["https://mts0.google.com/vt?lyrs=m@262000000\u0026src=api\u0026hl=zh-CN\u0026","https://mts1.google.com/vt?lyrs=m@262000000\u0026src=api\u0026hl=zh-CN\u0026"]],[["http://khm0.googleapis.com/kh?v=150\u0026hl=zh-CN\u0026","http://khm1.googleapis.com/kh?v=150\u0026hl=zh-CN\u0026"],null,null,null,1,"150",["https://khms0.google.com/kh?v=150\u0026hl=zh-CN\u0026","https://khms1.google.com/kh?v=150\u0026hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/vt?lyrs=h@262000000\u0026src=api\u0026hl=zh-CN\u0026","http://mt1.googleapis.com/vt?lyrs=h@262000000\u0026src=api\u0026hl=zh-CN\u0026"],null,null,null,null,"h@262000000",["https://mts0.google.com/vt?lyrs=h@262000000\u0026src=api\u0026hl=zh-CN\u0026","https://mts1.google.com/vt?lyrs=h@262000000\u0026src=api\u0026hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/vt?lyrs=t@132,r@262000000\u0026src=api\u0026hl=zh-CN\u0026","http://mt1.googleapis.com/vt?lyrs=t@132,r@262000000\u0026src=api\u0026hl=zh-CN\u0026"],null,null,null,null,"t@132,r@262000000",["https://mts0.google.com/vt?lyrs=t@132,r@262000000\u0026src=api\u0026hl=zh-CN\u0026","https://mts1.google.com/vt?lyrs=t@132,r@262000000\u0026src=api\u0026hl=zh-CN\u0026"]],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=84\u0026hl=zh-CN\u0026","http://khm1.googleapis.com/kh?v=84\u0026hl=zh-CN\u0026"],null,null,null,null,"84",["https://khms0.google.com/kh?v=84\u0026hl=zh-CN\u0026","https://khms1.google.com/kh?v=84\u0026hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/mapslt?hl=zh-CN\u0026","http://mt1.googleapis.com/mapslt?hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=zh-CN\u0026","http://mt1.googleapis.com/mapslt/ft?hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/vt?hl=zh-CN\u0026","http://mt1.googleapis.com/vt?hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=zh-CN\u0026","http://mt1.googleapis.com/mapslt/loom?hl=zh-CN\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=zh-CN\u0026","https://mts1.googleapis.com/mapslt?hl=zh-CN\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=zh-CN\u0026","https://mts1.googleapis.com/mapslt/ft?hl=zh-CN\u0026"]],[["https://mts0.googleapis.com/mapslt/loom?hl=zh-CN\u0026","https://mts1.googleapis.com/mapslt/loom?hl=zh-CN\u0026"]]],["zh-CN","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/17/0","3.17.0"],[3278673121],1,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=150\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",262000000]],[null,"zh-CN","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",262000000]],[null,"zh-CN","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"m",262000000]],[null,"zh-CN","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"m",262000000]],[null,"zh-CN","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",132],[0,"r",132000000]],[null,"zh-CN","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",132],[0,"r",132000000]],[null,"zh-CN","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"zh-CN","US",null,18],0],[null,null,[null,"zh-CN","US",null,18],3],[null,null,[null,"zh-CN","US",null,18],6],[null,null,[null,"zh-CN","US",null,18],0],["https://mts0.google.com/vt","https://mts1.google.com/vt"],"/maps/vt"],2,500,["http://geo0.ggpht.com/cbk?cb_client=maps_sv.uv_api_demo","http://www.gstatic.com/landmark/tour","http://www.gstatic.com/landmark/config","/maps/preview/reveal?authuser=0","/maps/preview/log204","/gen204?tbm=map","http://static.panoramio.com.storage.googleapis.com/photos/"]], loadScriptTime);   };   var loadScriptTime = (new Date).getTime();   getScript("http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/17/0/main.js"); })();

 

成功反饋結果

function showPosition(position) {

     var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); //初始化一個google的經緯度對象    

     var geocoder = new   google.maps.Geocoder();

     geocoder.geocode({ 'latLng': latlng }, function (results, status) {

        if (status == google.maps.GeocoderStatus.OK) {            

            alter(results[0].address_components[2].short_name);  //定位城市   

        }        

        else

    {      

        alert("獲取位置失敗");        

   }    

    });

}

相關文章
相關標籤/搜索