1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
| <template>
<img :src="weaterImgUrl" class="weater-img"/>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue"
import AMapLoader from "@amap/amap-jsapi-loader"
const baseUrl = import.meta.env.VITE_BASE_URL
const weaterImgUrl = ref(baseUrl + "/img/weather/weather01.png")
// 天气列表
const weatherList = [
{ id: 1, name: "晴", url: baseUrl + "/img/weather/weather01.png" },
{ id: 2, name: "少云", url: baseUrl + "/img/weather/weather02.png" },
{ id: 3, name: "晴间多云", url: baseUrl + "/img/weather/weather03.png" },
{ id: 4, name: "多云", url: baseUrl + "/img/weather/weather04.png" },
{ id: 5, name: "阴", url: baseUrl + "/img/weather/weather05.png" },
{ id: 6, name: "有风", url: baseUrl + "/img/weather/weather06.png" },
{ id: 7, name: "平静", url: baseUrl + "/img/weather/weather07.png" },
{ id: 8, name: "微风", url: baseUrl + "/img/weather/weather08.png" },
{ id: 9, name: "和风", url: baseUrl + "/img/weather/weather09.png" },
{ id: 10, name: "清风", url: baseUrl + "/img/weather/weather10.png" },
{ id: 11, name: "强风/劲风", url: baseUrl + "/img/weather/weather11.png" },
{ id: 12, name: "疾风", url: baseUrl + "/img/weather/weather12.png" },
{ id: 13, name: "大风", url: baseUrl + "/img/weather/weather13.png" },
{ id: 14, name: "烈风", url: baseUrl + "/img/weather/weather14.png" },
{ id: 15, name: "风暴", url: baseUrl + "/img/weather/weather15.png" },
{ id: 16, name: "狂爆风", url: baseUrl + "/img/weather/weather16.png" },
{ id: 17, name: "飓风", url: baseUrl + "/img/weather/weather17.png" },
{ id: 18, name: "热带风暴", url: baseUrl + "/img/weather/weather18.png" },
{ id: 19, name: "霾", url: baseUrl + "/img/weather/weather19.png" },
{ id: 20, name: "中度霾", url: baseUrl + "/img/weather/weather20.png" },
{ id: 21, name: "重度霾", url: baseUrl + "/img/weather/weather21.png" },
{ id: 22, name: "严重霾", url: baseUrl + "/img/weather/weather22.png" },
{ id: 23, name: "阵雨", url: baseUrl + "/img/weather/weather23.png" },
{ id: 24, name: "雷阵雨", url: baseUrl + "/img/weather/weather24.png" },
{ id: 25, name: "雷阵雨并伴有冰雹", url: baseUrl + "/img/weather/weather25.png" },
{ id: 26, name: "小雨", url: baseUrl + "/img/weather/weather26.png" },
{ id: 27, name: "中雨", url: baseUrl + "/img/weather/weather27.png" },
{ id: 28, name: "大雨", url: baseUrl + "/img/weather/weather28.png" },
{ id: 29, name: "暴雨", url: baseUrl + "/img/weather/weather29.png" },
{ id: 30, name: "大暴雨", url: baseUrl + "/img/weather/weather30.png" },
{ id: 31, name: "特大暴雨", url: baseUrl + "/img/weather/weather31.png" },
{ id: 32, name: "强阵雨", url: baseUrl + "/img/weather/weather32.png" },
{ id: 33, name: "强雷阵雨", url: baseUrl + "/img/weather/weather33.png" },
{ id: 34, name: "极端降雨", url: baseUrl + "/img/weather/weather34.png" },
{ id: 35, name: "毛毛雨/细雨", url: baseUrl + "/img/weather/weather35.png" },
{ id: 36, name: "雨", url: baseUrl + "/img/weather/weather36.png" },
{ id: 37, name: "小雨-中雨", url: baseUrl + "/img/weather/weather37.png" },
{ id: 38, name: "中雨-大雨", url: baseUrl + "/img/weather/weather38.png" },
{ id: 39, name: "大雨-暴雨", url: baseUrl + "/img/weather/weather39.png" },
{ id: 40, name: "暴雨-大暴雨", url: baseUrl + "/img/weather/weather40.png" },
{ id: 41, name: "大暴雨-特大暴雨", url: baseUrl + "/img/weather/weather41.png" },
{ id: 42, name: "雨雪天气", url: baseUrl + "/img/weather/weather42.png" },
{ id: 43, name: "雨夹雪", url: baseUrl + "/img/weather/weather43.png" },
{ id: 44, name: "阵雨夹雪", url: baseUrl + "/img/weather/weather44.png" },
{ id: 45, name: "冻雨", url: baseUrl + "/img/weather/weather45.png" },
{ id: 46, name: "雪", url: baseUrl + "/img/weather/weather46.png" },
{ id: 47, name: "阵雪", url: baseUrl + "/img/weather/weather47.png" },
{ id: 48, name: "小雪", url: baseUrl + "/img/weather/weather48.png" },
{ id: 49, name: "中雪", url: baseUrl + "/img/weather/weather49.png" },
{ id: 50, name: "大雪", url: baseUrl + "/img/weather/weather50.png" },
{ id: 51, name: "暴雪", url: baseUrl + "/img/weather/weather51.png" },
{ id: 52, name: "小雪-中雪", url: baseUrl + "/img/weather/weather52.png" },
{ id: 53, name: "中雪-大雪", url: baseUrl + "/img/weather/weather53.png" },
{ id: 54, name: "大雪-暴雪", url: baseUrl + "/img/weather/weather54.png" },
{ id: 55, name: "浮尘", url: baseUrl + "/img/weather/weather55.png" },
{ id: 56, name: "扬沙", url: baseUrl + "/img/weather/weather56.png" },
{ id: 57, name: "沙尘暴", url: baseUrl + "/img/weather/weather57.png" },
{ id: 58, name: "强沙尘暴", url: baseUrl + "/img/weather/weather58.png" },
{ id: 59, name: "龙卷风", url: baseUrl + "/img/weather/weather59.png" },
{ id: 60, name: "雾", url: baseUrl + "/img/weather/weather60.png" },
{ id: 61, name: "浓雾", url: baseUrl + "/img/weather/weather61.png" },
{ id: 62, name: "强浓雾", url: baseUrl + "/img/weather/weather62.png" },
{ id: 63, name: "轻雾", url: baseUrl + "/img/weather/weather63.png" },
{ id: 64, name: "大雾", url: baseUrl + "/img/weather/weather64.png" },
{ id: 65, name: "特强浓雾", url: baseUrl + "/img/weather/weather65.png" },
{ id: 66, name: "热", url: baseUrl + "/img/weather/weather66.png" },
{ id: 67, name: "冷", url: baseUrl + "/img/weather/weather67.png" },
{ id: 68, name: "未知", url: baseUrl + "/img/weather/weather68.png" }
]
/**
* 执行加载
*/
window._AMapSecurityConfig = { // 加载密钥
serviceHost: "xxx"
}
AMapLoader.load({
key: "xxx", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.CitySearch,AMap.Geolocation,AMap.Weather"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
const citySearch = new AMap.CitySearch()
citySearch.getLocalCity((status:any, result:any) => {
if (status === "complete" && result.info === "OK") {
// 查询成功，result即为当前所在城市信息
console.log(result)
} else { // 使用定位接口进行定位
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默认：true
timeout: 10000, // 设置定位超时时间，默认：无穷大
offset: [10, 20], // 定位按钮的停靠位置的偏移量
zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
position: "RB" // 定位按钮的排放位置, RB表示右下
})
geolocation.getCityInfo(function(status:any, result:any) {
if (status === "complete") { // result 是具体的定位信息
const citycode = result.citycode
}
})
}
})
// 获取天气信息
const weather = new AMap.Weather()
const city = "杭州市"
// 执行实时天气信息查询
weather.getLive(city, function(district, data) {
const weather = data.weather
console.log(data)
const count = weatherList.length
for (let i = 0; i < count; i++) {
// console.log(weatherList[i])
if (weatherList[i].name === data.weather) {
weaterImgUrl.value = weatherList[i].url
break
}
}
// console.log(data)
})
}).catch(e => {
console.log(e)
})
onMounted(() => {
console.log("sdfa")
})
</script>
<style lang="less" scoped>
.weater-img{
width:100%;
height:100%;
vertical-align: middle;
}
</style>
|
