vue高德天气接口，加上自定义天气图片
Web端使用高德api获取天气 先获取城市，再通过城市获取天气
1.登录https://lbs.amap.com/，控制台->应用管理->我的应用->创建应用->添加key
*切记选择web端(JS API)
2.在index.html中 引入高德地图的css和js
3.在页面调用高德天气接口
{{weather}}
{{temperature}}°C
data(){
return{
weatherList: [
{ id: 1, name: "大雪", url: require("@/assets/icon/01.png") },
{ id: 2, name: "大雨", url: require("@/assets/icon/02.png") },
{ id: 3, name: "小雪", url: require("@/assets/icon/03.png") },
{ id: 4, name: "小雨", url: require("@/assets/icon/04.png") },
{ id: 5, name: "大暴雨", url: require("@/assets/icon/dabaoyu.png") },
{ id: 6, name: "多云", url: require("@/assets/icon/duoyun.png") },
{ id: 7, name: "雷阵雨", url: require("@/assets/icon/leizhenyu.png") },
{ id: 8, name: "霾", url: require("@/assets/icon/mai.png") },
{ id: 9, name: "晴", url: require("@/assets/icon/qing.png") },
{id: 10,name: "沙尘暴",url: require("@/assets/icon/shachenbao.png"),},
{ id: 11, name: "雾", url: require("@/assets/icon/wu.png") },
{ id: 12, name: "扬尘", url: require("@/assets/icon/yangchen.png") },
{ id: 13, name: "阴", url: require("@/assets/icon/yin.png") },
{ id: 14, name: "雨夹雪", url: require("@/assets/icon/yujiaxue.png") },
{ id: 15, name: "阵雪", url: require("@/assets/icon/zhenxue.png") },
{ id: 16, name: "阵雨", url: require("@/assets/icon/zhenyu.png") },
],
weather: "",
temperature: "",
imgUrl: "",
reportTime: "",
}
}
getLngLatLocation() {
const that = this;
AMap.plugin("AMap.CitySearch", function () {
var citySearch = new AMap.CitySearch();
citySearch.getLocalCity(function (status, result) {
if (status === "complete" && result.info === "OK") {
AMap.plugin("AMap.Weather", function () {
var weather = new AMap.Weather();
// 执行实时天气信息查询
weather.getLive(result.city, function (err, data) {
console.log("天气", data);
that.weather = data.weather;
that.temperature = data.temperature;
that.reportTime = data.reportTime;
for (let i = 0; i < that.weatherList.length; i++) {
if (that.weatherList[i].name === data.weather) {
console.log(10101010,that.weatherList[i].name,data.weather)
that.imgUrl = that.weatherList[i].url;
console.log(99999999,that.imgUrl)
break;
}
}
// console.log(10101010,data)
});
});
}
});
});
},
},