目錄
前言
一、注冊(cè)成為高德平臺(tái)開發(fā)者
二、注冊(cè)天氣key
1.點(diǎn)擊首頁(yè)右上角打開控制臺(tái)
?2.創(chuàng)建新應(yīng)用
三、vue項(xiàng)目使用
1.打開vue項(xiàng)目找到public下的index.html，如果是vue3的話直接在主目錄打開index.html文件就行，主要就是打開出口文件
?編輯
2.根據(jù)高德開放文檔獲取當(dāng)前城市信息
?3.獲取天氣信息
?4.完整代碼
5.效果
四、流量限制
前言
????????之前就寫過(guò)一版vue獲取天氣地區(qū)信息接口的，是根據(jù)騰訊位置服務(wù)，獲取到當(dāng)前為止信息，之后再去請(qǐng)求心知天氣的api獲取到當(dāng)前天氣信息。但是打包后有跨域的問(wèn)題，修改也比較麻煩，故此這個(gè)版本放棄了，找了個(gè)最簡(jiǎn)單的，通過(guò)高德開放平臺(tái)的地理位置信息去請(qǐng)求高德的天氣接口實(shí)現(xiàn)，比之前的簡(jiǎn)單，故此記錄一下。
有感興趣的小伙伴也可以看我之前寫的那篇：獲取地理位置請(qǐng)求免費(fèi)天氣接口_請(qǐng)叫我歐皇i的博客-CSDN博客
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、注冊(cè)成為高德平臺(tái)開發(fā)者
- 打開高德開放平臺(tái),注意??！如果打開后各種操作響應(yīng)巨慢，可以換個(gè)瀏覽器打開高德開放平臺(tái)，比如谷歌
高德開放平臺(tái) | 高德地圖API
? ? ? 2.登錄注冊(cè)成為開發(fā)者，注冊(cè)成功后應(yīng)該如下所示
二、注冊(cè)天氣key
1.點(diǎn)擊首頁(yè)右上角打開控制臺(tái)
?2.創(chuàng)建新應(yīng)用
應(yīng)用管理===》我的應(yīng)用===》創(chuàng)建新應(yīng)用
選擇天氣后點(diǎn)擊新建?
?
?新建完后點(diǎn)擊添加key
?
?點(diǎn)擊藍(lán)色字體：安全密鑰使用說(shuō)明
三、vue項(xiàng)目使用
1.打開vue項(xiàng)目找到public下的index.html，如果是vue3的話直接在主目錄打開index.html文件就行，主要就是打開出口文件
直接使用他官網(wǎng)的方式二實(shí)現(xiàn)
在index.html的?<head>標(biāo)簽內(nèi)添加以下代碼，密鑰就是下圖的這倆個(gè)，別貼錯(cuò)了，這個(gè)key和安全密鑰都要添加上去
注意??！每次修改完出口文件后記得重啟vue項(xiàng)目
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'您申請(qǐng)的安全密鑰',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請(qǐng)的key值"></script> 
2.根據(jù)高德開放文檔獲取當(dāng)前城市信息
創(chuàng)建個(gè)weather.vue文件
getCity() {
let that = this;
let city=null;
AMap.plugin('AMap.CitySearch', function() {
var citySearch = new AMap.CitySearch();
citySearch.getLocalCity(function(status, result) {
if (status === 'complete' && result.info === 'OK') {
console.log(result,'城市信息')
}
});
});
},得到城市信息如下：
?3.獲取天氣信息
這邊需要上個(gè)接口傳個(gè)當(dāng)前的城市名稱之后再調(diào)用
// 獲取天氣
getWeather(city) {
//加載天氣查詢插件
AMap.plugin('AMap.Weather', function() {
//創(chuàng)建天氣查詢實(shí)例
let weather = new AMap.Weather();
//執(zhí)行實(shí)時(shí)天氣信息查詢
weather.getLive(city, function(err, data) {
console.log(err, data);
if (data.info == 'OK') {
}
});
});
}得到：
?4.完整代碼
<template>
<div class="box">
<p class="boxTemperature">{{ weatcherData.temperature }}°</p>
<p class="boxWeather">{{ weatcherData.weather }}</p>
<p class="boxCity">{{ weatcherData.city }}</p>
</div>
</template>
<script>
export default {
data() {
return {
weatcherData: {
adcode: "",
city: "",
humidity: "",
info: "",
province: "",
reportTime: "",
temperature: 0,
weather: "",
windDirection: "",
windPower: "",
},
};
},
mounted() {
this.getCity();
},
methods: {
getCity() {
let that = this;
AMap.plugin("AMap.CitySearch", function () {
var citySearch = new AMap.CitySearch();
citySearch.getLocalCity(function (status, result) {
if (status === "complete" && result.info === "OK") {
// 查詢成功，result即為當(dāng)前所在城市信息
that.getWeather(result.city);
}
});
});
},
// 獲取天氣
getWeather(city) {
let that = this;
//加載天氣查詢插件
AMap.plugin("AMap.Weather", function () {
//創(chuàng)建天氣查詢實(shí)例
let weather = new AMap.Weather();
//執(zhí)行實(shí)時(shí)天氣信息查詢
weather.getLive(city, function (err, data) {
console.log(data);
if (data.info == "OK") {
that.weatcherData = data;
console.log(that.weatcherData, "天氣");
}
});
});
},
},
};
</script>
<style scoped>
.box {
display: flex;
align-items: center;
color: #5e5757;
margin-right: 20px;
}
.boxTemperature {
font-size: 18px;
}
.boxWeather {
font-size: 14px;
margin: 0 0 0 15px;
}
.boxCity {
margin-left: 10px;
font-size: 16px;
}
</style>
5.效果
四、流量限制
個(gè)人開發(fā)者一天可以調(diào)用5k，算還不錯(cuò)吧，小企業(yè)的話這個(gè)應(yīng)該也能滿足了
流量限制說(shuō)明-實(shí)用工具-開發(fā)指南-Web服務(wù) API | 高德地圖API
打包后也可以獲取到，也不需要跨域啥的。如果還有更好的辦法可以在評(píng)論區(qū)聯(lián)系我~文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-683192.html
文章到此結(jié)束，希望對(duì)你有所幫助~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-683192.html
到了這里，關(guān)于最簡(jiǎn)單vue獲取當(dāng)前地區(qū)天氣--高德開放平臺(tái)實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
