使用JS获取当前地理位置方法汇总

今年的项目开发中,初步接触了移动端WEB开发,也就边学习HTML5边开发,主要使用了JQuery Mobile技术,发现这个不适合做互联网产品,大部分样式都需要重写,只用了部分功能。手机端WEB开发过程中第一次接触了定位功能,通过各大搜索引擎发现手机端定位都是通过浏览器的定位,而用在PC端浏览器第一次会弹出提示“是否开启定位功能”,Boss看到这个提示,却觉得对用户的体验效果不好,不好那我换一种方式实现不就好了,这又不是多大的事,而Boss的脸色就大变,就说:不应该有这样的体验。我们这样做不都是为了赶时间,能够尽快将新功能发布嘛。

  1.手机WEB定位方法:

代码如下:

var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数,errorFunc获取定位失败回调
    //首先设置默认城市
    var defCity = {
        id: '000001',
        name: '北京市',
        date: curDateTime()//获取当前时间方法
    };
    //默认城市
    $.cookie('VPIAO_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('VPIAO_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('VPIAO_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('VPIAO_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('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });
};

前提要引入百度API:<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

  2.PC端通过IP实现方法:

  采用腾讯提供的接口,这个目前已经不能使用了  

代码如下:

<script type="text/javascript" src="http://fw.qq.com/ipaddress"></script>
<script type="text/javascript">
    document.write(IPData[0]);    //显示IP地址
    document.write(IPData[2]);    //显示省
    document.write(IPData[3]);    //显示市
</script>

  采用新浪接口: http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js

  多地域测试方法:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=127.0.0.1

代码如下:

<script type="text/javascript">
        $.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js', function(_result) {
            if (remote_ip_info.ret == '1') {
                alert('国家:' + remote_ip_info.country + '<BR>省:' + remote_ip_info.province + '<BR>市:' + remote_ip_info.city + '<BR>区:' + remote_ip_info.district + '<BR>ISP:' + remote_ip_info.isp + '<BR>类型:' + remote_ip_info.type + '<BR>其他:' + remote_ip_info.desc);
            } else {
                alert('没有找到匹配的IP地址信息!');
            }
        });
</script>

  网易有道IP地址接口(这个有待测试)

  http://www.youdao.com/smartresult-xml/search.s?type=ip&q=IP地址

淘宝请求接口(GET)

代码如下:

<script>
var ip = "124.127.108.133";
            var url = "http://ip.taobao.com/service/getIpInfo.php?ip=" + ip;
            $.getJSON(url, function (json) {
                var myprovince2 = json.data.area;
                var mycity2 = json.data.region;
                alert("您所在的城市是:" + myprovince2 + mycity2);
            });
</script>

  太平洋IP地址库API接口

  http://whois.pconline.com.cn/?ip=[ip地址字符串]

  另外:还有google、搜狐等提供对应的接口,大家可以自己试一试。

  搜狐IP地址查询接口(默认GBK):http://pv.sohu.com/cityjson

搜狐IP地址查询接口(可设置编码):http://pv.sohu.com/cityjson?ie=utf-8

搜狐另外的IP地址查询接口:http://txt.go.sohu.com/ip/soip

  3.获取客户端IP方法

代码如下:

<script>
var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' + Math.random();
            $.getJSON(url, function(data) {
                alert(data.Ip);
            });
</script>

  

  今天就写到这吧,还有好多工作需要去完成,等有时间了可以试试其它接口。欢迎大家来拍砖,提供更好的方法。

(0)

相关推荐

  • js+html5获取用户地理位置信息并在Google地图上显示的方法

    本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your position:</p> <button onclick="getLocation()">Try It</button&

  • js实现PC端根据IP定位当前城市地理位置

    话不多说,请看代码: <script type="text/javascript"> $.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js', function(_result) { if (remote_ip_info.ret == '1') { alert('国家:' + remote_ip_info.country +'\n省:' + remote_ip_info.provi

  • Angularjs自定义指令实现三级联动 选择地理位置

    Angularjs自定义指令实现三级联动效果,先上图 代码 <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo

  • 百度地图api应用标注地理位置信息(js版)

    有时做了一些东西没有记录,而过一段时间再看的时候,有会忘记了.需要在重新在看一遍. 百度地图javascript api可以参考 http://developer.baidu.com/map/reference/  示例:http://developer.baidu.com/map/jsdemo.htm 更多百度地图的介绍http://www.cnblogs.com/milkmap/tag/%E5%9C%B0%E5%9B%BEAPI/   里面介绍的非常详细. 弄了一个百度地图来标注地理位置信息

  • JavaScript地理位置信息API

    对于一个Web开发程序员来说,开发工作中一个最有意思的方面就是获取地理位置信息:试想一下,浏览你的网页的用户是在什么地方?程序员可以根据用户的地理位置信息来调整网站的语言.特定产品介绍等.下面我们将要演示的就是通过浏览器里JavaScript地理位置信息API来获取详细地理信息! 检查你的浏览器是否支持地理位置信息API 目前主流的浏览器都已经对JavaScript地理位置信息API有了较好的支持.但如果你还不放心,那么,确认地理位置信息API支持情况最好的方式是浏览器的功能特征测试. if("

  • 微信js-sdk地理位置接口用法示例

    本文实例讲述了微信js-sdk地理位置接口用法.分享给大家供大家参考,具体如下: 前提,已经在wx.config()中权限验证通过,官方文档地址 官方api 使用微信内置地图查看位置接口 wx.openLocation({ latitude: 0, // 纬度,浮点数,范围为90 ~ -90 longitude: 0, // 经度,浮点数,范围为180 ~ -180. name: '', // 位置名 address: '', // 地址详情说明 scale: 1, // 地图缩放级别,整形值,

  • 利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解

    首先引入JavaScript API文件 <script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script> 此API提供的接口共有6个,geoip_country_code(){国家代码},geoip_country_ name(){国家名称},geoip_city() {城市名称},geoip_region(){地区代码},geoip_latit

  • Node.js和PHP根据ip获取地理位置的方法

    一.Node.js实现代码 复制代码 代码如下: var http = require('http');var util = require('util'); /** * 根据 ip 获取获取地址信息 */var getIpInfo = function(ip, cb) {    var sina_server = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json&ip=';    var url = sina_ser

  • JS获取当前地理位置的方法

    本文实例为大家分享了JS获取当前地理位置方法的具体代码,供大家参考,具体内容如下 1.手机定位 var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数,errorFunc获取定位失败回调 //首先设置默认城市 var defCity = { id: '000001', name: '北京市', date: curDateTime()//获取当前时间方法 }; //默认城市 $.cookie('VP

  • js实现百度地图定位于地址逆解析,显示自己当前的地理位置

    话不多说,随小编一起看看实例代码吧 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type=&qu

随机推荐