js
import AMapLoader from '@amap/amap-jsapi-loader';
created() {
var that = this;
AMapLoader.load({
"key": "your key", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": ['AMap.Weather'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI,缺省不加载
"version": '1.1', // AMapUI 缺省 1.1
"plugins": [], // 需要加载的 AMapUI ui插件
},
"Loca": { // 是否加载 Loca, 缺省不加载
"version": '1.3.2' // Loca 版本,缺省 1.3.2
},
}).then((AMap) => {
AMap.plugin('AMap.Weather', function() {
//创建天气查询实例
var weather = new AMap.Weather();
//执行实时天气信息查询
weather.getForecast('宣州区', function(err, data) {
console.log(err, data);
that.data = data;
});
})
});
},
实例
<template>
<div class="tianqi">
<div class="tianqilist">
<div class="tianqiitem">
<div class="tqtop">
<div class="tqtopl">
{{data.reportTime|gettime}}
</div>
<div class="tqtopr">
{{data.reportTime|getdays}}
</div>
</div>
<div class="tqbody">
<!-- <div class="tqimg">
<image src="../../static/tianqiimg.png" mode=""></image>
</div> -->
<div class="tqbodyr">
<p>{{data.forecasts[0].dayWeather}} I {{data.forecasts[0].dayWindDir}} {{data.forecasts[0].dayWindPower}}级</p>
<p>温度:{{data.forecasts[0].dayTemp}}℃</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import moment from 'moment'
export default {
data() {
return {
data: {}
}
},
components: {
},
filters: {
getdays: function(next) {
return moment(next).format('YYYY-MM-DD');
},
gettime: function(next) {
return moment(next).format('HH:mm');
},
},
created() {
var that = this;
AMapLoader.load({
"key": "your key", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": ['AMap.Weather'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI,缺省不加载
"version": '1.1', // AMapUI 缺省 1.1
"plugins": [], // 需要加载的 AMapUI ui插件
},
"Loca": { // 是否加载 Loca, 缺省不加载
"version": '1.3.2' // Loca 版本,缺省 1.3.2
},
}).then((AMap) => {
AMap.plugin('AMap.Weather', function() {
//创建天气查询实例
var weather = new AMap.Weather();
//执行实时天气信息查询
weather.getForecast('宣州区', function(err, data) {
console.log(err, data);
that.data = data;
});
})
});
},
}
</script>
高德地图天气api地址