html js获取天气预报,天气预报-天气预报-示例中心-JS API 示例 | 高德地图API

天气预报查询

html,body,#container{

height:100%;

}

.weather{

width:5rem;

display:inline-block;

padding-left:0.5rem;

}

.sharp{

height: 1rem;

width: 1rem;

background-color: white;

transform: rotateZ(45deg);

box-shadow: 2px 2px 3px rgba(114, 124, 245, .5);

position: inherit;

margin-left: 10.5rem;

margin-top: -6px;

}

预报天气

---

var map = new AMap.Map('container', {

resizeEnable: true,

center: [116.486409,39.921489],

zoom: 12

});

AMap.plugin('AMap.Weather', function() {

var weather = new AMap.Weather();

//查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市

weather.getLive('朝阳区', function(err, data) {

if (!err) {

var str = [];

str.push('

实时天气' + '

---

');

str.push('

城市/区：' + data.city + '

');

str.push('

天气：' + data.weather + '

');

str.push('

温度：' + data.temperature + '℃

');

str.push('

风向：' + data.windDirection + '

');

str.push('

风力：' + data.windPower + ' 级

');

str.push('

空气湿度：' + data.humidity + '

');

str.push('

发布时间：' + data.reportTime + '

');

var marker = new AMap.Marker({map: map, position: map.getCenter()});

var infoWin = new AMap.InfoWindow({

content: '

'+str.join('')+'

isCustom:true,

offset: new AMap.Pixel(0, -37)

});

infoWin.open(map, marker.getPosition());

marker.on('mouseover', function() {

infoWin.open(map, marker.getPosition());

});

}

});

//未来4天天气预报

weather.getForecast('朝阳区', function(err, data) {

if (err) {return;}

var str = [];

for (var i = 0,dayWeather; i < data.forecasts.length; i++) {

dayWeather = data.forecasts[i];

str.push(dayWeather.date+' '+dayWeather.dayWeather+' '+ dayWeather.nightTemp + '~' + dayWeather.dayTemp + '℃');

}

document.getElementById('forecast').innerHTML = str.join('
');

});

});