[Head First Html5 Programming notes] Chapter 5 获取定位

Chapter 5 获取定位


1 地理位置
  1. 经纬度

    (1) 地理定位API使用小数表示经纬度,分秒值需转为小数

    function(degree, minute, second) {
    	return degree + (minute/60) + (second/3600);
    }
    

    (2) 西经(W)、南纬(S)用负数表示

  2. 定位方式

    (1) 定位方式由浏览器决定

    (2) 地理定位API定位方式

  • List item
  • GPS
  • IP地址
  • 蜂窝电话
  • Wi-Fi
2 地理定位程序实现
  1. 浏览器支持

    利用navigator对象的geolocatioon属性判断浏览器是否支持地理定位

    if(navigator.geolocation) {
    	//若不支持,则navigator没有geolocation属性,返回null
    }
    
  2. navigator.geolocation对象的getCurrentPosition方法

    navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options);
    //若浏览器支持地理定位,则调用successHandler,不支持则调用调用errorHandler,options可定制地理定位方法,后两个参数可选
    
  3. 调用sucessHandler

    displayPosition = function(position) {	//positon为地理定位API传入的对象
    	var latitude = position.coords.latitude;	
        var longitude = position.coords.longitude;
        //position的coords属性为指向coordination对象的引用,coordination对象包含latitude属性和		longitude属性
    }
    
  4. 调用errorHandler

    displayError = function(error) {	//地理定位API传入error对象
        var errorTypes = {
            0: "Unoknown error",				//其他错误,打印error.message获取信息
            1: "Permission denied by users",	//用户拒绝地理定位请求
            2: "Position is not available",		//浏览器无法获取地位
            3: "Request timed out"				//超过地理定位API限时,仍未获得位置
        };
        var errorMessage = errorTypes[error.code]; //error对象的code属性表明错误类型
        if(error.code == 0 || error.code  == 2) {
            errorMessage = errorMessage + " " + error.message; 
            //error对象的message属性可能包含更多错误信息
        }
        var div = document.getElementById("location");
        div.innerHTML = errorMessage;
    }
    
3 使用Google Map API
4 地理定位API
  1. Geolocation对象

    Geolocation
    getCurrentPosition, watch Position, clearWatch
  2. Position对象

    Position
    coords, timestamp
  3. Coordinates对象

    Coordinates
    latitude, longitude, accuracy(, altitude, altitudeAccuracy, heading, speed)

    ()中属性可能不支持,取决于使用设备

  4. navigator.geolocation对象的watchPosition方法

    var watchId = navigator.geolocation.watchPostion(displayPosition, displayError);
    

    (1) 每当position改变时便重新调用successHandler

    (2) 返回值watchId

  5. navigator.geolocation对象的clearWatch方法

    if(watchId) {
    	navigator.geolocation.clearWatch(watchId);	//去除地理定位监视
        watchId = null;
    }
    
  6. navigator.geolocation对象的getCurrentPosition方法的第三个参数positionOptions

    var positionOption = {
    	enableHighAccuracy: false,
        timeout: Infinity,			//单位:毫秒
        maximumAge: 0				//单位:毫秒
    }
    

    (1) enableHighAccuracy,让浏览器尽可能进行高精度的定位(尽管需要付出耗电等代价),但不保证结果一定高精度

    (2) timeout,如果浏览器在timeout指定时间内不能确定位置,将调用errorHandler,默认为Infinity

    (3) maximumAge,如果浏览器有在maximumAge内确定的位置,则getCurrentPosition会返回现有的缓存位置,默认为0(即每次调用getCurrentPosition都重新定位)

发布了27 篇原创文章 · 获赞 0 · 访问量 405

猜你喜欢

转载自blog.csdn.net/young_cr7/article/details/104443652