根据用户IP获取当前位置天气

最近项目中需要一个天气的小部件，根据用户的IP地址显示当前用户所处位置的天气。
找个很久，有很多是用iframe调用其他天气网页，这样会产生页面无法控制的问题。又看到yahoo的weather API，这个API是很不错的，功能强大，内容详细，但是查找的条件比较苛刻，需要WOEID。这个ID我没有找到方法可以动态获取，其他网友提供的方法也都无法完成此功能（有些是已经停用），所以只能找其他的方法了。下面是我利用worldweatheronline服务以及sina Ip地址服务获取天气的代码。<script src="Scripts/jquery-1.4.1.js"></script>
<script src="Scripts/jqPagination/js/WeatherConv.js"></script>
<script type="text/javascript" src="http://counter.sina.com.cn/ip"></script>
<script type="text/javascript">
        //创建天气预报核心对象
        $(document).ready(function () {
            url = "http://api.worldweatheronline.com/free/v1/weather.ashx?q=" + ILData[0] + "&format=json&num_of_days=1&key=yourkey&callback=?";
            $.getJSON(url, function (result) {
                var strdate = new Date(result.data.weather[0].date);
                $("#date").html(strdate.toLocaleDateString());
                $("#tempMinC").html(result.data.weather[0].tempMinC);
                $("#tempMaxC").html(result.data.weather[0].tempMaxC);
                var type = result.data.weather[0].weatherCode;
                if (WeatherType[type] != null) {
                    $("#weatherDesc").html(WeatherType[type]);
                }
                else {
                    $("#weatherDesc").html(result.data.weather[0].weatherDesc[0].value);
                }
                var wind = result.data.weather[0].winddir16Point;
                if (Windcompass[wind] != null) {
                    $("#Wind").html(Windcompass[wind]);
                }
                $("#weatherIconUrl").attr('src', result.data.weather[0].weatherIconUrl[0].value);
            });
        });
    </script>
首先引入jquery库，WeatherConv.js是我自己写的天气和风向编码对照表，因为worldweatheronline服务返回的是英语，接下来是sina的服务地址，用来获取ip地址。
下面是html页面
<div>
        <div style="float: left;">
            <img id="weatherIconUrl" alt="" src="" />
        </div>
        <div style="float: left;margin-left:2px;">
            <div id="temp"><span id="tempMinC"></span>C～<span id="tempMaxC"></span>C</div>
            <div id="weatherDesc"></div>
            <div id="Wind"></div>
            <div id="date"></div>
        </div>
    </div>
使用worldweatheronline服务需要申请一个Key，免费的。该服务的网址在http://www.worldweatheronline.com/
附件上传不上来，稍后把WeatherConv.js发上来吧JavaScript天气预报

解决方案 »

  1.   

    WeatherConv.js链接
    http://download.csdn.net/detail/ryan1221/5339586
      

  2.   

    两个js文件，都引用进来了，不知道是不是我的jquery-1.4.1.js版本问题呢?
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>weather.html</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">     <script type="text/javascript" src="jquery-1.4.1.js"></script>
    <script type="text/javascript" src="WeatherConv.js"></script>
    <script type="text/javascript" src="http://counter.sina.com.cn/ip"></script> <script type="text/javascript">
            //创建天气预报核心对象
            $(document).ready(function () {
                url = "http://api.worldweatheronline.com/free/v1/weather.ashx?q=" + ILData[0] + "&format=json&num_of_days=1&key=yourkey&callback=?";
                $.getJSON(url, function (result) {
                    var strdate = new Date(result.data.weather[0].date);
                    $("#date").html(strdate.toLocaleDateString());
                    $("#tempMinC").html(result.data.weather[0].tempMinC);
                    $("#tempMaxC").html(result.data.weather[0].tempMaxC);
                    var type = result.data.weather[0].weatherCode;
                    if (WeatherType[type] != null) {
                        $("#weatherDesc").html(WeatherType[type]);
                    }
                    else {
                        $("#weatherDesc").html(result.data.weather[0].weatherDesc[0].value);
                    }
                    var wind = result.data.weather[0].winddir16Point;
                    if (Windcompass[wind] != null) {
                        $("#Wind").html(Windcompass[wind]);
                    }
                    $("#weatherIconUrl").attr('src', result.data.weather[0].weatherIconUrl[0].value);
                });
            });
        </script>   
       </head>
      
      <body>
    <div>
            <div style="float: left;">
                <img id="weatherIconUrl" alt="" src="" />
            </div>
            <div style="float: left;margin-left:2px;">
                <div id="temp"><span id="tempMinC"></span>C～<span id="tempMaxC"></span>C</div>
                <div id="weatherDesc"></div>
                <div id="Wind"></div>
                <div id="date"></div>
            </div>
        </div>
      </body>
    </html>我这样写，应该没问题吧?可是不行呢，显示不出来
    谁测试下，行不行啊?还是我机子的问题?
      

  4.   

    我用你上面的代码调试了一下，是worldweatheronline服务返回错误，所以我查看了URL后，发现你没有将URL中的yourkey替换为你自己申请的KeyID。你可以替换以后测试一下，应该没什么问题了。
      

  5.   

    杯具啊，英语不好，KeyId是不是那个网站的注册用户ID或用户名啊?
    应该不是吧，但貌似不知道在那里找Key。
    另外，有一个疑问，如果说使用者，都有去注册一个Key，那这个实用性有问题啊?
    你不可能也叫你的用户，也去这个网站申请一个Key吧?
      

  6.   

    杯具啊，英语不好，KeyId是不是那个网站的注册用户ID或用户名啊?
    应该不是吧，但貌似不知道在那里找Key。
    另外，有一个疑问，如果说使用者，都有去注册一个Key，那这个实用性有问题啊?
    你不可能也叫你的用户，也去这个网站申请一个Key吧?KeyID是在worldweatheronline注册后，登陆，会有一个My API Keys。这个是免费Key，如果用户想要有更多的需求，也可以申请一个付费的Key。毕竟这是为了免费使用而找到的方法，为用户申请一个Key就可以了。雅虎的位置查询也需要申请一个账号，且每天有查询数量限制。
      

  7.   

    杯具啊，英语不好，KeyId是不是那个网站的注册用户ID或用户名啊?
    应该不是吧，但貌似不知道在那里找Key。
    另外，有一个疑问，如果说使用者，都有去注册一个Key，那这个实用性有问题啊?
    你不可能也叫你的用户，也去这个网站申请一个Key吧?KeyID是在worldweatheronline注册后，登陆，会有一个My API Keys。这个是免费Key，如果用户想要有更多的需求，也可以申请一个付费的Key。毕竟这是为了免费使用而找到的方法，为用户申请一个Key就可以了。雅虎的位置查询也需要申请一个账号，且每天有查询数量限制。
    不错，终于搞定了，感谢分享。
    另外，这个只是当天的天气预报，实用性不强，楼主可以扩展下，至少要显示明天或后天的天气情况，
    像QQ上或2345.com上的天气预报那样。显示三天内，应该是要把num_of_days=1改为num_of_days=3吧。
      

  8.   

    是的，num_of_days是限制返回几天的数据，最大是5