html5自动获取城市天气,自动定位当前城市获取实时天气预报

先上效果图，看图说话

f4ff77a64dd3e039cc7309ef6b60c45d.png

废话少说，直接撸教程

一、利用百度地图api自动获取当前ip所在城市名

1.登录百度开放平台，在控制台创建我的应用

8687b5f3fc6d197123e4374df10a3c3e.png

2.创建成功后，复制应用AK键

3.在项目页面引入百度地图片api

4.编写JQ代码获取当前ip所在城市名

$(function (){

var myCity = new BMap.LocalCity();

var cityName = "";

myCity.get(function(data){

cityName = data.name;

if(cityName.indexOf("市") != -1){

cityName = cityName.substr(0,cityName.indexOf("市"));

}

getWeather(cityName);

});

})

二、通过WebService调用天气预报接口‘

1.Maven导入WebService相关依赖

org.apache.axis

axis

1.4

javax.xml.rpc

javax.xml.rpc-api

1.1

commons-discovery

commons-discovery

0.2

axis

axis-wsdl4j

1.5.1

2.根据天气预报接口wsdl文件生成客户端代码

wsdl文件地址：http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl

将wsdl文件保存至项目

对wsdl文件进行编译后，利用IDEA工具自动生成客户端代码集

4fa2f0a2d7cb907f5d06808f7d51f5fb.png

3eb2575ea10a9490b98d163c575204a8.png

自动生成以下文件

3d117d5791dd3306d0a4c608eb54cdd4.png

(如果自动生成不了，请按以下操作尝试几次)

8b5f774dbc3c8bf50e9a3aa913803a73.png

三、前端AJAX请求调用本地项目天气预报客户端数据‘

1.后台调用客户端天气预报方法

c3f5eb8eca9d1f2d3dc51c60b7709f81.png

2.字符串数组weatherInfo封装了全部天气预报信息，用户可定制自已需要的天气信息

4949599fbabc4f53447ce18d54619f27.png

ps：虽然使用是免费的，但是每天有使用次数限制

~唉~，果然世界上没有免费的午餐滴