简单定位并使用天气预报接口实现实时天气查询

用了一个网上荡的模板（模板之家，好地方）

界面如下：

需求：1.定位获取城市信息；2.将城市信息作为参数传给天气接口获取天气信息

第一部分：定位获取城市信息

使用百度地图API，在百度地图开发者中心创建一个应用（浏览器端）并获得AK

在需要定位的页面使用

    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=XXXXXXXXXXXXXXXXXX"></script>

注意点1.需要把jQuery放在最上面；

注意点2.如果无法使用，在v=2.0&后面加上amp;尝试一下

百度地图开放给用户的接口定位一般不准，，总会偏上很多，，比如我在雨花区，会偏到鼓楼区，所以只能使用城市来作为天气预报接口用的参数

js代码：

<script type="text/javascript">
	    $(document).ready(function getPosition(){
	    	var countVistors = 0;
	    	var geolocation = new BMap.Geolocation();
	    	// 开启百度地图SDK辅助定位
	    	geolocation.enableSDKLocation();
	    	geolocation.getCurrentPosition(function(r){
	    		if(this.getStatus() == BMAP_STATUS_SUCCESS){
	    			var mk = new BMap.Marker(r.point);
	    			// 创建地理编码实例      
	    			var myGeo = new BMap.Geocoder();      
	    			// 根据坐标得到地址描述    
	    			myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result){      
	    			    if (result){   
	    			    	var city = result.addressComponents.city;
	    			    	alert(city); //1.此处可直接获取
	    			    }      
	    			});
	    			$.ajax({ //2.此处是将经纬度传给后台，再调用百度地图逆地址编码接口转换，两处效果一样
	    				url : "weather/uploadLocation",
	    				data : {
	    					lng : r.point.lng,
	    					lat : r.point.lat
	    				},
	    				method : "post",
	    				dataType : "json",
	    				success : function(res){
	    					debugger;
	    					document.getElementById("city").innerText = res.city;
	    					document.getElementById("cond_txt").innerText = res.cond_txt;
	    					document.getElementById("tmp").innerText = res.tmp;
	    				},error : function(){
	    					alert("地址上传失败");
	    				}
	    			});	    				    			
	    })
    	
    </script>

通过AJAX传递经纬度给后台

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSONObject;
        @ResponseBody
	@RequestMapping("weather/uploadLocation")
	public String locationTransform(HttpServletRequest request) throws IOException {
		// 经度
		String lng = request.getParameter("lng");
		// 纬度
		String lat = request.getParameter("lat");
		// 登录成功，将用户登录信息插入历史表中
		Map<String, String> loginHistory = new HashMap<String, String>();
		loginHistory.put("lng", lng);
		loginHistory.put("lat", lat);
		loginHistoryService.insertLoginHistory(loginHistory);
		// 调用百度地图转换接口-逆地址编码
		String url = "http://api.map.baidu.com/geocoder/v2/?location="+
		lat+","+lng+"&output=json&pois=1&ak=XXXXXXXXXXX";
		URL u = new URL(url);
		HttpURLConnection conn = (HttpURLConnection) u.openConnection();
		StringBuilder stringBuilder = new StringBuilder();
		conn.setRequestMethod("GET");
		conn.setConnectTimeout(5000);
		conn.setReadTimeout(5000);
		if (conn.getResponseCode() == 200) {
			InputStream inputStream = conn.getInputStream();
			BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));
			String str;
			while((str = reader.readLine())!=null) {
				stringBuilder.append(str);
//				System.out.println(str);
			}
		}
		/*
		 * renderReverse&&renderReverse({"status":0,"result":{"location":{"lng":118.77807440999993,"lat":32.05723552100348},
		 * "formatted_address":"江苏省南京市鼓楼区广州路189","business":"南师大,南大,上海路","addressComponent":
		 * {"country":"中国","country_code":0,"country_code_iso":"CHN","country_code_iso2":"CN","province":"江苏省","city":"南京市",
		 * "city_level":2,"district":"鼓楼区","town":"","adcode":"320106","street":"广州路","street_number":"189","direction":"附近",
		 * "distance":"5"}...................
		 * http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding-abroad
		 */
		String addString =  stringBuilder.toString();
		JSONObject parseObject = JSONObject.parseObject(addString);
		JSONObject jsonResult = parseObject.getJSONObject("result");
		// 获取城市信息
		JSONObject addressComponentResult = jsonResult.getJSONObject("addressComponent");
		String city = addressComponentResult.getString("city");
		// 根据城市调用天气接口获取天气数据
		String weatherUrl = "https://free-api.heweather.com/s6/weather/now?location="+city+
		"&key=xxxxxxxxxxxxxxxxxxxxxxxxx";
		StringBuilder weatherBuilder = new StringBuilder();
		URL weatherU = new URL(weatherUrl);
		HttpURLConnection weatherCon = (HttpURLConnection) weatherU.openConnection();
		weatherCon.setRequestMethod("GET");
		weatherCon.setReadTimeout(5000);
		weatherCon.setConnectTimeout(5000);
		if (weatherCon.getResponseCode() == 200) {
			InputStream weatherIn = weatherCon.getInputStream();
			BufferedReader weatherReader = new BufferedReader(new InputStreamReader(weatherIn));
			String weatherStr = "";
			while ((weatherStr = weatherReader.readLine()) != null) {
				weatherBuilder.append(weatherStr);
//				System.out.println(weatherStr);
			}
		}
		String weather = weatherBuilder.toString();
		weather = weather.substring(15,weather.length()-2);
		JSONObject weatherObject = JSONObject.parseObject(weather);
		// 实时天气
		JSONObject now = weatherObject.getJSONObject("now");
		// 温度
		String tmp = now.getString("tmp");
		// 风力
		String wind_spd = now.getString("wind_spd");
		// 云气
		String cond_txt = now.getString("cond_txt");
		JSONObject weatherResult = new JSONObject();
		weatherResult.put("tmp",tmp);
		weatherResult.put("wind_spd",wind_spd);
		weatherResult.put("cond_txt",cond_txt);
		weatherResult.put("city", city);
		return weatherResult.toJSONString();
	}

前台页面代码

                    <ul id="nt-title">
                        <li><i class="wi-day-lightning"></i>  <span id="city"></span> 
                            <b id="cond_txt"></b> ; <b id="tmp"></b><i class="wi-celcius"></i>
                        </li>
                    </ul>

页面加载时，js调用百度地图接口获取当前位置信息，传递给后台处理；后台使用接口+参数获取天气信息并作为JSON返回给前台AJAX成功事件。