突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习

介绍

本篇文章主要介绍HTML5中地理信息服务及地理位置API的使用，其中包括了以下内容：
1. 地理信息服务的概述
2. 地理位置API的基本知识和使用方法
3. 常用的地理位置API实例

地理信息服务概述

地理信息服务是指向用户提供有关地理位置信息及相关服务的技术和应用。在HTML5中，通过Geolocation API实现了对地理位置信息的获取。

地理位置API

Geolocation API是HTML5中的一项重要的API，定义了JavaScript脚本通过浏览器获取设备的位置信息的方法。

Geolocation对象方法

Geolocation对象提供了以下几个方法：

1. getCurrentPosition()：获取当前位置的地理信息
2. watchPosition()：监控位置变化
3. clearWatch()：停止监控位置变化

getCurrentPosition方法

getCurrentPosition方法的语法如下：

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)

参数说明:

1. successCallback：获取位置之后的回调函数
2. errorCallback：获取位置失败的回调函数
3. options：定位选项，包括以下三个属性
   • enableHighAccuracy：是否高精度定位
   • timeout：超时时间
   • maximumAge：缓存时间

getCurrentPosition方法会返回一个Position对象，包含了设备当前的地理位置信息，包括经度、纬度等属性。

下面是一个getCurrentPosition的使用示例：

navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position.coords.latitude + "," + position.coords.longitude);
});

watchPosition方法

watchPosition方法是一个连续监视地理位置的函数。可以通过该方法不断获取设备的地理位置信息。

var watchId = navigator.geolocation.watchPosition(watchSuccess, watchError, options);

参数说明：

1. watchSuccess：获取位置之后的回调函数
2. watchError：获取位置失败的回调函数
3. options：定位选项，与getCurrentPosition方法中的options相同

watchPosition方法会返回一个watchId，用于停止定位监听。调用clearWatch(watchId)方法，可以停止定位监听。

下面是一个watchPosition的使用示例：

var watchId = navigator.geolocation.watchPosition(function(position) {
    console.log(position.coords.latitude + "," + position.coords.longitude);
});

clearWatch方法

clearWatch方法用于停止watchPosition方法的定位监听。

navigator.geolocation.clearWatch(watchId);

示例说明

接下来我们用移动端电商的场景来实现一个根据用户位置自动定位省市区的功能。

//获取用户所在位置
navigator.geolocation.getCurrentPosition(
    function(position) {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        //使用第三方API获取经纬度信息对应的省市区
        var url = 'http://api.map.baidu.com/geocoder/v2/?ak=您的AK&location=' + lat + ',' + lng + '&output=json&pois=1';
        $.ajax({
            type: "GET",
            dataType: "jsonp",
            url: url,
            success: function(data) {
                if (data.status == 0) {
                    //当前位置所在省份
                    var province = data.result.addressComponent.province;
                    //当前位置所在城市
                    var city = data.result.addressComponent.city;
                    //当前位置所在城市区
                    var district = data.result.addressComponent.district;

                    //在页面上进行省市区的填充
                    $("#province").val(province);
                    $("#city").val(city);
                    $("#district").val(district);
                }
            }
        });
    },
    function(error) {
        console.log(error.message);
    }, {
        enableHighAccuracy: true,
        maximumAge: 30000,
        timeout: 27000
    }
);

以上代码中，我们使用getCurrentPosition方法获取当前用户的地理位置信息，并通过百度地图API将经纬度信息转换为具体的省市区，最后在前端页面上填充省市区信息。

除了上述的例子，Geolocation API还可以用于地图应用、导航应用、生活服务等方面，应用广泛，具有很大的实用价值。