公司网站自己可以做吗,题材挖掘机网站怎么做,织梦统计网站访问量代码,一个网站的开发周期目录 前言 一、注册成为高德平台开发者 二、注册天气key 1.点击首页右上角打开控制台 2.创建新应用 三、vue项目使用 1.打开vue项目找到public下的index.html#xff0c;如果是vue3的话直接在主目录打开index.html文件就行#xff0c;主要就是打开出口文件 编辑 2.根据高德… 目录 前言 一、注册成为高德平台开发者 二、注册天气key 1.点击首页右上角打开控制台 2.创建新应用 三、vue项目使用 1.打开vue项目找到public下的index.html如果是vue3的话直接在主目录打开index.html文件就行主要就是打开出口文件 编辑 2.根据高德开放文档获取当前城市信息 3.获取天气信息 4.完整代码 5.效果 四、流量限制 前言 之前就写过一版vue获取天气地区信息接口的是根据腾讯位置服务获取到当前为止信息之后再去请求心知天气的api获取到当前天气信息。但是打包后有跨域的问题修改也比较麻烦故此这个版本放弃了找了个最简单的通过高德开放平台的地理位置信息去请求高德的天气接口实现比之前的简单故此记录一下。
有感兴趣的小伙伴也可以看我之前写的那篇获取地理位置请求免费天气接口_请叫我欧皇i的博客-CSDN博客 提示以下是本篇文章正文内容下面案例可供参考
一、注册成为高德平台开发者
打开高德开放平台,注意如果打开后各种操作响应巨慢可以换个浏览器打开高德开放平台比如谷歌
高德开放平台 | 高德地图API 2.登录注册成为开发者注册成功后应该如下所示 二、注册天气key
1.点击首页右上角打开控制台 2.创建新应用
应用管理》我的应用》创建新应用 选择天气后点击新建 新建完后点击添加key 点击蓝色字体安全密钥使用说明 三、vue项目使用
1.打开vue项目找到public下的index.html如果是vue3的话直接在主目录打开index.html文件就行主要就是打开出口文件
直接使用他官网的方式二实现 在index.html的 head标签内添加以下代码密钥就是下图的这俩个别贴错了这个key和安全密钥都要添加上去 注意每次修改完出口文件后记得重启vue项目 script typetext/javascriptwindow._AMapSecurityConfig {securityJsCode:您申请的安全密钥,}
/script
script typetext/javascript srchttps://webapi.amap.com/maps?v1.4.15key您申请的key值/script 2.根据高德开放文档获取当前城市信息
创建个weather.vue文件 getCity() {let that this;let citynull;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.获取天气信息
这边需要上个接口传个当前的城市名称之后再调用 // 获取天气getWeather(city) {//加载天气查询插件AMap.plugin(AMap.Weather, function() {//创建天气查询实例let weather new AMap.Weather();//执行实时天气信息查询weather.getLive(city, function(err, data) {console.log(err, data);if (data.info OK) {}});});}
得到 4.完整代码
templatediv classboxp classboxTemperature{{ weatcherData.temperature }}°/pp classboxWeather{{ weatcherData.weather }}/pp classboxCity{{ weatcherData.city }}/p/div
/templatescript
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即为当前所在城市信息that.getWeather(result.city);}});});},// 获取天气getWeather(city) {let that this;//加载天气查询插件AMap.plugin(AMap.Weather, function () {//创建天气查询实例let weather new AMap.Weather();//执行实时天气信息查询weather.getLive(city, function (err, data) {console.log(data);if (data.info OK) {that.weatcherData data;console.log(that.weatcherData, 天气);}});});},},
};
/scriptstyle 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;
}
/style5.效果 四、流量限制
个人开发者一天可以调用5k算还不错吧小企业的话这个应该也能满足了
流量限制说明-实用工具-开发指南-Web服务 API | 高德地图API 打包后也可以获取到也不需要跨域啥的。如果还有更好的办法可以在评论区联系我~
文章到此结束希望对你有所帮助~
