2011年8月9日 星期二

HTML5 Get User Location

廢話不多說,看Code。
var successCallback = function(position) {
        //前略,map這邊是使用Google Map v3
        //地圖移過去使用者的位置
       map.setZoom(10);
        map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
    },
    errorCallback = function() {
        switch(error.code) {
            case error.TIMEOUT:
                alert ('Timeout');
                break;
            case error.POSITION_UNAVAILABLE:
                alert ('Position unavailable');
                break;
            case error.PERMISSION_DENIED:
                alert ('Permission denied');
                break;
            case error.UNKNOWN_ERROR:
                alert ('Unknown error');
                break;
        }
    },
    getLocation = function() {
        //檢查有無支援 HTML5 的geolocation
        if (navigator.geolocation) {
            //會跳出確認是否要讓網頁使用你的位置
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
        }
    };
getLocation();  //開始取得位置

用法範例:
navigator.geolocation.getCurrentPosition( successCallback, errorCallback, options );
var watchId = navigator.geolocation.watchPosition( successCallback, errorCallback, options );
navigator.geolocation.clearWatch( watchId );

實作範例:
http://taiwansportplace.appspot.com/mobile/weather

W3C 官方參考:
http://dev.w3.org/geo/api/spec-source.html
http://dev.w3.org/geo/api/spec-source.html#position-options

沒有留言:

張貼留言