使用Javascript获取地理位置（省市区）的几种方式

在之前的一个项目开发中，当时是初步接触了移动端H5开发，自己就边学习HTML5相关知识边开发，当时主要是JQuery比较流行，就使用了JQuery Mobile技术，发现这个不太适合做移动端产品，大部分样式都需要重写，只用了部分组件功能。

在手机端端H5开发过程中第一次接触了定位功能，通过搜索相关知识和查阅帮助文档发现手机端定位都是通过浏览器的内置方法获取，如果在PC端浏览器第一次打开会弹出提示“是否开启定位功能”，老板看到这个提示，觉得对用户的体验效果不好，不好那我们就换一种方式实现不就好了，这也不是多大的事，有的是解决方案，就是要牺牲一点自己的时间。

第一种，手机浏览器内置定位方法，使用百度地图显示定位数据点

注册百度开发者账号，引入 Javascript API 脚本

<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

// 获取定位数据
var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数，errorFunc获取定位失败回调
 
    //首先设置默认城市
    var defCity = {
        id: '000001',
        name: '北京市',
        date: curDateTime()//获取当前时间方法
    };
    //默认城市
    $.cookie('VP_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' });
 
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            //var map = new BMap.Map("container");   // 创建Map实例
            var point = new BMap.Point(lon, lat); // 创建点坐标
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function (rs) {
                var addComp = rs.addressComponents;
                var curCity = {
                    id: '',
                    name: addComp.province,
                    date: curDateTime()
                };
                //当前定位城市
                $.cookie('VP_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });
                //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
                if (successFunc != undefined)
                    successFunc(addComp);
            });
        },
        function (error) {
            switch (error.code) {
                case 1:
                    alert("位置服务被拒绝。");
                    break;
                case 2:
                    alert("暂时获取不到位置信息。");
                    break;
                case 3:
                    alert("获取位置信息超时。");
                    break;
                default:
                    alert("未知错误。");
                    break;
            }
            var curCity = {
                id: '000001',
                name: '北京市',
                date: curDateTime()
            };
            //默认城市
            $.cookie('VP_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });
            if (errorFunc != undefined)
                errorFunc(error);
        }, { timeout: 5000, enableHighAccuracy: true });
    } else {
        alert("你的浏览器不支持获取地理位置信息。");
        if (errorFunc != undefined)
            errorFunc("你的浏览器不支持获取地理位置信息。");
    }
};
// 显示地图位置
var showPosition = function (position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    //var map = new BMap.Map("container");   // 创建Map实例
    var point = new BMap.Point(lon, lat); // 创建点坐标
    var gc = new BMap.Geocoder();
    gc.getLocation(point, function (rs) {
        var addComp = rs.addressComponents;
        var curCity = {
            id: '',
            name: addComp.province,
            date: curDateTime()
        };
        //当前定位城市
        $.cookie('VP_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });
        //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
    });
};
// 显示定位错误
var showPositionError = function (error) {
    switch (error.code) {
        case 1:
            alert("位置服务被拒绝。");
            break;
        case 2:
            alert("暂时获取不到位置信息。");
            break;
        case 3:
            alert("获取位置信息超时。");
            break;
        default:
            alert("未知错误。");
            break;
    }
    var curCity = {
        id: '000001',
        name: '北京市',
        date: curDateTime()
    };
    //默认城市
    $.cookie('VP_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });
};

第二种，腾讯位置服务接口，IP定位

参考文档：https://lbs.qq.com/service/webService/webServiceGuide/webServiceIp

// GET请求，注意参数值要进行URL编码
https://apis.map.qq.com/ws/location/v1/ip?ip=111.206.145.41&key=*****-A4W3E-B7BVO-*****-6TRDJ-*****

第三种，太平洋IP地址库接口

参考文档：http://whois.pconline.com.cn/

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script>
function testJson(obj) {
    console.log("省["+obj.pro+"] 市["+obj.city+"] 区["+obj.region+"]");
}
</script>
<script src="http://whois.pconline.com.cn/ipJson.jsp?callback=testJson&ip=61.235.82.163"></script>

第四种，搜狐IP地址获取

查询接口（默认GBK）：http://pv.sohu.com/cityjson

查询接口（可设置编码）：http://pv.sohu.com/cityjson?ie=utf-8

IP地址查询接口：http://txt.go.sohu.com/ip/soip

获取客户端IP方法

$.getScript("http://pv.sohu.com/cityjson?ie=utf-8",function(data){  
    console.log(returnCitySN);
});

温馨提示

文章内容如果写的存在问题欢迎留言指出，让我们共同交流，共同探讨，共同进步~~~

文章如果对你有帮助，动动你的小手点个赞，鼓励一下，给我前行的动力。