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

Ryan1221 2013-05-07 11:46:07
最近项目中需要一个天气的小部件，根据用户的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发上来吧
...全文
961 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
Ryan1221 2013-05-09
  • 打赏
  • 举报
 回复
是的，num_of_days是限制返回几天的数据，最大是5
Ryan1221 2013-05-08
  • 打赏
  • 举报
 回复
我用你上面的代码调试了一下，是worldweatheronline服务返回错误，所以我查看了URL后，发现你没有将URL中的yourkey替换为你自己申请的KeyID。你可以替换以后测试一下，应该没什么问题了。
网络科技 2013-05-08
  • 打赏
  • 举报
 回复
引用 13 楼 Ryan1221 的回复:
[quote=引用 12 楼 xzy88 的回复:]
[quote=引用 11 楼 Ryan1221 的回复:]
我用你上面的代码调试了一下，是worldweatheronline服务返回错误，所以我查看了URL后，发现你没有将URL中的yourkey替换为你自己申请的KeyID。你可以替换以后测试一下，应该没什么问题了。

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

KeyID是在worldweatheronline注册后，登陆，会有一个My API Keys。这个是免费Key，如果用户想要有更多的需求，也可以申请一个付费的Key。毕竟这是为了免费使用而找到的方法，为用户申请一个Key就可以了。雅虎的位置查询也需要申请一个账号，且每天有查询数量限制。[/quote]
不错，终于搞定了，感谢分享。
另外，这个只是当天的天气预报，实用性不强，楼主可以扩展下，至少要显示明天或后天的天气情况，
像QQ上或2345.com上的天气预报那样。显示三天内，应该是要把num_of_days=1改为num_of_days=3吧。
Ryan1221 2013-05-08
  • 打赏
  • 举报
 回复
引用 12 楼 xzy88 的回复:
[quote=引用 11 楼 Ryan1221 的回复:] 我用你上面的代码调试了一下，是worldweatheronline服务返回错误，所以我查看了URL后，发现你没有将URL中的yourkey替换为你自己申请的KeyID。你可以替换以后测试一下，应该没什么问题了。
杯具啊，英语不好，KeyId是不是那个网站的注册用户ID或用户名啊? 应该不是吧，但貌似不知道在那里找Key。 另外，有一个疑问，如果说使用者，都有去注册一个Key，那这个实用性有问题啊? 你不可能也叫你的用户，也去这个网站申请一个Key吧?[/quote] KeyID是在worldweatheronline注册后，登陆，会有一个My API Keys。这个是免费Key，如果用户想要有更多的需求，也可以申请一个付费的Key。毕竟这是为了免费使用而找到的方法，为用户申请一个Key就可以了。雅虎的位置查询也需要申请一个账号，且每天有查询数量限制。
网络科技 2013-05-08
  • 打赏
  • 举报
 回复
引用 11 楼 Ryan1221 的回复:
我用你上面的代码调试了一下，是worldweatheronline服务返回错误，所以我查看了URL后，发现你没有将URL中的yourkey替换为你自己申请的KeyID。你可以替换以后测试一下，应该没什么问题了。
杯具啊，英语不好，KeyId是不是那个网站的注册用户ID或用户名啊? 应该不是吧，但貌似不知道在那里找Key。 另外，有一个疑问，如果说使用者，都有去注册一个Key，那这个实用性有问题啊? 你不可能也叫你的用户，也去这个网站申请一个Key吧?
Ryan1221 2013-05-07
  • 打赏
  • 举报
 回复
WeatherConv.js链接 http://download.csdn.net/detail/ryan1221/5339586
折翼断JJ 2013-05-07
  • 打赏
  • 举报
 回复
谢谢，帮顶。
await2013 2013-05-07
  • 打赏
  • 举报
 回复
感谢分享
网络科技 2013-05-07
  • 打赏
  • 举报
 回复 


<!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>

我这样写，应该没问题吧?可是不行呢，显示不出来
谁测试下，行不行啊?还是我机子的问题?
Joker_TT 2013-05-07
  • 打赏
  • 举报
 回复
网络科技 2013-05-07
  • 打赏
  • 举报
 回复
引用 7 楼 Ryan1221 的回复:
实现效果
两个js文件，都引用进来了，不知道是不是我的jquery-1.4.1.js版本问题呢?
Ryan1221 2013-05-07
  • 打赏
  • 举报
 回复
实现效果
Ryan1221 2013-05-07
  • 打赏
  • 举报
 回复
引用 5 楼 xzy88 的回复:
试了下，貌似没什么效果啊，楼主确认代码没问题不?
有没有调试看下有什么没有引用的？
网络科技 2013-05-07
  • 打赏
  • 举报
 回复
试了下，貌似没什么效果啊，楼主确认代码没问题不?
网络科技 2013-05-07
  • 打赏
  • 举报
 回复
不错，支持下
vue获取当前IP所在地天气.docx
原生的vue源代码，使用vue获取当前IP，并且获取到当前所在地天气.docx，亲测有效，有问题可一直私聊我
unity 根据IP地址自动定位获取城市名称、城市天气
脚本绑定到场景对象上，结合天气数据库 WeatherAdCode.txt（放到Resources文件下）
ip显示天气 源码
根据获得ip获取天气情况，也可根据城市显示天气，点击刷新获取当前ip所在城市的天气。
Winform天气预报WebService根据IP地址自动识别当前城市
Winform天气预报WebService根据IP地址自动识别当前城市
Unity 工具之 获取当前所在城市的天气数据的封装（自动定位当前所在城市，天气数据可以获得多天天数据）
Unity 工具之 获取当前所在城市的天气数据的封装（自动定位当前所在城市，天气数据可以获得多天天数据） 实现原理 1、首先根据联网 IP 获得当前所在城市 2、然后根据城市名称得到天气所需要的城市ID； 3、根据城市ID，最后得到天气数据，解析封装给接口调用；
JavaScript

87,991

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章