HTML5 地理定位 + 百度定位API ：获取省市区地理信息来之一个优惠打折的活动，活动页面需要根据不同的地区来展示不

背景

来之一个优惠打折的活动，活动页面需要根据不同的地区来展示不同的优惠信息，前端需要拿到当前地区的省和市，把省和市传给服务器接口，最后返回对应的优惠信息，所以想办法怎么拿到当前地区的省和市的信息。

思路分析

1、通过HTML5地理API获取经纬度

2、将经纬度逆地址解析我们要的省市区地理信息

用到的API

1、HTML5地理API

2、百度定位API

HTML5地理API使用

因为有原生的API支持，就没必要使用百度定位API去获取经纬度了。

代码实现：

        if (navigator.geolocation) {
            // 检测是否支持地理定位,支持则获取经纬度
            navigator.geolocation.getCurrentPosition(
            res => {
                console.log('当前位置信息:'+ res)
                console.log('纬度:'+ res.coords.latitude); // 十进制数的纬度
                console.log('经度:'+ res.coords.longitude); // 十进制数的经度
            },
            err => {
                // 获取用户位置失败返回错误
                switch (err.code) {
                    case 1:
                        console.log('位置服务请求被拒绝');
                        break
                    case 2:
                        console.log('暂时获取不到位置信息');
                        break
                    case 3:
                        console.log('获取信息超时');
                        break
                    case 4:
                        console.log('未知错误');
                        break
                }
            },{
                enableHighAccuracy: true, // 指示浏览器获取高精度的位置，默认为false
                maximumAge: 3000, // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
                timeout: 4000 // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
                }
            );
        } else {
            console.log('不支持地理定位');
        }

百度地图API使用

使用方法：

1、首先申请百度账号，申请成为百度开发者，获取密钥(AK)，因为使用百度地图服务必须申请秘钥才可以使用，在百度地图开放平台注册开发者账号，然后在控制台中创建开发应用，最后在应用列表找到API KEY，用这个API KEY使用服务了；
2、通过百度的定位Geocoding API V3.0 来获取逆地理编码服务。

使用限制：

普通IP定位API服务与其他API服务一样，具有每天使用配额和并发次数的限制。如果您的使用配额或并发不能满足业务使用需求，可以通过认证个人/企业开发者的方式，提升配额。如果您已经是企业认证开发者，配额/并发依然不够使用，可在API控制台，我的服务中申请做进一步提升。

代码实现：

function readCurrentAddress() {
    let url = 'http://api.map.baidu.com/reverse_geocoding/v3/?ak=zoNQsbDF2qaWPD6DYbv8ZwUcLDdADxAb&output=json&coordtype=wgs84ll&location=23,113'；
       // 引用JQ库，ajax的api来请求
           $.ajax({
               url: url,
               type: 'GET',
               async: false,
               dataType: 'jsonp',
               contentType: 'application/json; charset=utf-8',
               success: function (result) {
               // {"status":0,"result":{"location":{"lng":113.01176790806545,"lat":23.00318068781693},"formatted_address":"广东省佛山市禅城区新村大街","business":"","addressComponent":{"country":"中国","country_code":0,"country_code_iso":"CHN","country_code_iso2":"CN","province":"广东省","city":"佛山市","city_level":2,"district":"禅城区","town":"","town_code":"","adcode":"440604","street":"新村大街","street_number":"","direction":"","distance":""},"pois":[],"roads":[],"poiRegions":[],"sematic_description":"","cityCode":138}}
                   console.log(result); // 根据返回地区参数就可以用来做逻辑判断了
               }
           })
       }
       readCurrentAddress();

参考

Geocoding API v3.0