java地区js得得内容 js获取当前城市

一。公司活动页使用到根据当前城市获取当前商场数据的功能，所以我开始做使用h5的新特性geolocation，以下有两种获取当前城市的方案(移动端)：（注意：必须是https协议才能使用geolocation获取经纬度）

1.使用百度地图api获取当前城市

2.使用geolocation获取经纬度，把经纬度给服务器接口获取当前城市，服务器端也是调用百度地图api获取的当前城市，这样做是为了我们对这个功能可以有一定的控制，防止出现一些意外状况

二。服务端接口实现方式

/*获取当前地理位置*/
import CurrentCityModel from '../models/CurrentCityModel';

export default class Geolocation {
    constructor() {
        this.currentCityModel = new CurrentCityModel();
    }

    getCity(longitude, latitude) {
        return new Promise((resolve, reject)=> {
            this.currentCityModel.getCurrentCity(longitude, latitude)
                .then((data = {})=> {
                    resolve(data.city);
                })
                .catch((error)=> {
                    reject(error);
                });
        })
    }

    getLocation() {
        if (navigator.geolocation) {
            return new Promise((resolve, reject)=> {
                navigator.geolocation.getCurrentPosition(
                    (position) => {//定位成功
                        let coords = position.coords, longitude = coords.longitude, latitude = coords.latitude;
                        this.getCity(longitude, latitude)
                            .then(resolve)
                            .catch(reject);
                    },
                    (error)=> {
                        //定位失败
                        this.locationError(error);
                    },
                    {
                        // 指示浏览器获取高精度的位置，默认为false
                        enableHighAccuracy: true,
                        // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
                        //timeout: Infinity,
                        timeout: 5000,
                        // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
                        maximumAge: 1000000
                    });
            });
        } else {
            alert("Your browser does not support Geolocation!");
        }
    }

    locationError(error) {
        console.log('获取地理位置失败');
        switch (error.code) {
            case error.TIMEOUT://超时
                alert("A timeout occured! Please try again!");
                break;
            case error.POSITION_UNAVAILABLE://表示无法确定设备的位置
                alert('We can\'t detect your location. Sorry!');
                break;
            case error.PERMISSION_DENIED://表示没有权限使用地理定位API
                alert('Please allow geolocation access for this to work.');
                break;
            case error.UNKNOWN_ERROR:
                alert('An unknown error occured!');
                break;
        }
    }
}
三。百度地图api实现方式

百度地图api:JavaScript API首家支持Https，已全面开放，无需申请可直接使用。

注意：仅JavaScript API V2.0及以上版本支持https，其他JavaScript API版本均不支持。使用https服务，请先检查您的版本以及配置注意事项。

这说明在项目中不需要考虑http或https请求，可以直接使用它的服务

1.使用方式

　　1.1 注册百度地图api

　　1.2 获取密钥<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

　　1.3 将密钥放入项目中

　　1.4 调用其服务获得对象数据

2.功能实现

/*Description:利用百度地图jsapi获取用户当前城市*/
export function getCurrentCity(fn) {
    let currentCity = '';
    let geolocation = new BMap.Geolocation();

    /*获取地址时异步的*/
    geolocation.getCurrentPosition(
        function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {  //通过Geolocation类的getStatus()可以判断是否成功定位。
                var pt = r.point;
                let gc = new BMap.Geocoder();
                gc.getLocation(pt, function (rs) {
                    currentCity = rs.addressComponents;
                    if (currentCity) {
                        fn(currentCity);
                    }
                });
            } else {
                //关于状态码
                //BMAP_STATUS_SUCCESS   检索成功。对应数值“0”。
                //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
                //BMAP_STATUS_UNKNOWN_LOCATION  位置结果未知。对应数值“2”。
                //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
                //BMAP_STATUS_INVALID_KEY   非法密钥。对应数值“4”。
                //BMAP_STATUS_INVALID_REQUEST   非法请求。对应数值“5”。
                //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
                //BMAP_STATUS_SERVICE_UNAVAILABLE   服务不可用。对应数值“7”。(自 1.1 新增)
                //BMAP_STATUS_TIMEOUT   超时。对应数值“8”。(自 1.1 新增)
                switch (this.getStatus()) {
                    case 2:
                        alert('位置结果未知 获取位置失败.');
                        break;
                    case 3:
                        alert('导航结果未知 获取位置失败..');
                        break;
                    case 4:
                        alert('非法密钥 获取位置失败.');
                        break;
                    case 5:
                        alert('对不起,非法请求位置  获取位置失败.');
                        break;
                    case 6:
                        alert('对不起,当前 没有权限 获取位置失败.');
                        break;
                    case 7:
                        alert('对不起,服务不可用 获取位置失败.');
                        break;
                    case 8:
                        alert('对不起,请求超时 获取位置失败.');
                        break;

                }
            }
        },
        {
            enableHighAccuracy: true
        }
    );

}