这是一个简单的小例子，获取天气过程可能有点繁琐，本次通过获取所在的城市，根据城市获取城市编码，再根据编码获取当前城市的天气情况。当然网上有很多关于天气获取的，如知心天气、中国气象局、和风天气、freeAPI等，所以，没必要那么复杂。感兴趣可以上网百度天气api或参考下列推荐几个天气接口链接，希望有所帮助。
免费天气预报api接口
和风天气预报和实况
实况天气
彩云天气API
百度地图Api简单实例：http://lbs.baidu.com/index.php?title=jspopularGL/guide/helloworld
关于Ak具体步骤生成可以参考此篇:https://www.cnblogs.com/shewuxuan/p/12642998.html
高德经纬坐标拾取工具
https://lbs.amap.com/console/show/picker
1.注册一个百度账号后，并创建属于自己的应用，生成Ak， 点我申请
2.创建index.html，引用百度地图API文件，注意此处的ak是之前注册申请过的
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
3.创建地图实例，并设置经纬度，百度实例介绍比较详细。
var map = new BMapGL.Map("container");
// 创建点坐标
var point = new BMapGL.Point(longiDis, lagiDis);
4.根据获取到当前经纬度及城市名，根据地名，调用高德api获取对应的地址编码，根据地址编码进行天气查询。
高德行政区域查询api
高德天气查询api
中国城市代码表
function cityToCode(cityName) {
let url = "https://restapi.amap.com/v3/config/district?keywords=" + cityName + "&subdistrict=0&key=5d2d3e6c0d5188bec134fc4fc1b139e0";
this.loadXMLDoc(url)
}
5.获取到的天气状况：
具体源码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
width: 70%;
height: 100%;
margin: 0 auto;
}
.aside {
position: fixed;
right: 29px;
z-index: 10000000;
top: 0;
}
</style>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=bcQ3L1zGiLHszt5MiEWGDLCUM1C6qdrK"></script>
</head>
<body>
<div id="container"></div>
<div class="aside">
<div class="row"><label for="">城市:</label><span id="city"></span></div>
<div class="row"><label for="">编码：</label><span id="code"></span></div>
<div class="row"><label for="">经度：</label><span id="longitide"></span></div>
<div class="row"><label for="">纬度：</label><span id="lagitide"></span></div>
<div class="row"><label for="">天气：</label><span id="weather"></span></div>
<div class="row"><label for="">风力等级：</label><span id="windpower"></span></div>
<div class="row"><label for="">温度：</label><span id="humidity"></span></div>
<div class="row"><label for="">省份：</label><span id="province"></span></div>
</div>
<script type="text/javascript">
/**
* 通过百度api获取当前城市及经纬度.
* 百度文档：
* https://lbsyun.baidu.com/index.php?title=webapi/weather（天气--服务文档，根据经纬度查询收费）
* http://lbs.baidu.com/index.php?title=jspopularGL/guide/widget（地图）
* */
function initMap(result) {
var longiDis, lagiDis, cityNames;
//获取当前城市经度
longiDis = result.center.lng;
//获取当前城市纬度
lagiDis = result.center.lat;
//获取当前城市名
cityNames = result.name;
console.log("IP 定位城市:" + cityNames + " 经度" + result.center.lng + " 纬度" + result.center.lat);
// 创建地图实例
var map = new BMapGL.Map("container");
// 创建点坐标
var point = new BMapGL.Point(longiDis, lagiDis);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
//开启鼠标滚轮缩放，地图的鼠标滚轮缩放默认是关闭的，需要配置开启。
map.enableScrollWheelZoom(true);
//设置地图旋转角度
map.setHeading(64.5);
//设置地图的倾斜角度
map.setTilt(73);
//设置地图模式为：地球模式
// map.setMapType(BMAP_EARTH_MAP)
this.cityToCode(cityNames)
document.getElementById('city').innerHTML = cityNames;
document.getElementById('longitide').innerHTML = longiDis;
document.getElementById('lagitide').innerHTML = lagiDis;
}
//获取当前城市
var curCity = new BMapGL.LocalCity();
curCity.get(initMap)
/**调用高德地图的api
* 通过获取到的地名，获取对应的地址编码，根据地址编码进行天气查询
* **/
function cityToCode(cityName) {
let url = "https://restapi.amap.com/v3/config/district?keywords=" + cityName + "&subdistrict=0&key=5d2d3e6c0d5188bec134fc4fc1b139e0";
this.loadXMLDoc(url)
}
function loadXMLDoc(url) {
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = () => {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(JSON.parse(xmlhttp.responseText).districts[0].adcode);
//获取所在城市的对应城市编码
let cityCode = JSON.parse(xmlhttp.responseText).districts[0].adcode;
this.getWeather(cityCode)
document.getElementById('code').innerHTML = cityCode;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
/**
* 根据城市编码号查询该城市目前天气状况
* @key:高德官网申请密钥
* @city:城市编码 如110101：北京
* @extensions: base:返回实时天气 all：返回预报天气
* @output:返回的格式 JSON/XML
* */
function getWeather(cityCode) {
let urlw = "https://restapi.amap.com/v3/weather/weatherInfo?key=5d2d3e6c0d5188bec134fc4fc1b139e0&city=" + cityCode + "&extensions=base";
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = () => {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log('获得' + cityCode + '城市', xmlhttp.responseText, JSON.parse(xmlhttp.responseText));
let weatherInfo = JSON.parse(xmlhttp.responseText).lives[0];
document.getElementById('weather').innerHTML = weatherInfo.weather;
document.getElementById('windpower').innerHTML = weatherInfo.windpower;
document.getElementById('humidity').innerHTML = weatherInfo.humidity;
document.getElementById('province').innerHTML = weatherInfo.province;
}
}
xmlhttp.open("GET", urlw, true);
xmlhttp.send();
}
</script>
</body>
</html>
