vue使用高德地图实现实时定位天气预报功能

更新时间：2022年05月31日 16:06:48 作者：船长在船上

这篇文章主要介绍了vue使用高德地图实现实时天气预报功能,根据定位功能，使用高德地图实现定位当前城市的天气预报功能，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下

JSAPI 的加载

JS API 2.0 版本提供了两种方案引入地图 JSAPI：

1. 使用官网提供的 JSAPI Loader 进行加载；

2. 以常规 JavaScript 脚本的方式加载；

注意：为避免地图数据协议和前端资源不匹配导致页面运行报错，只允许在线加载 JSAPI，禁止进行本地转存、与其它代码混合打包等用法。

使用 JSAPI Loader (推荐)

JSAPI Loader是我们提供的 API 加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法，具有以下特性：

来说明下上面的案例的问题：为什么此时图标就无法粘性定位了，主要是因为它（子元素）不知道以那个父元素的滚动为准(现在有两个父级元素都产生了滚动)，所以我们要对一层层祖级元素检查看是否有overflow属性如果有将元素设置 overflow: visible； body {overflow: visible； }；简单理解：两个父级body 和div.main 如果同高度宽度的话，子元素就不知道到底以父元素为主，就会出现无法粘性定位的支持以普通JS 和 npm包两种方式使用；
有效避免错误异步加载导致的 JSAPI 资源加载不完整问题；
对于加载混用多个版本 JSAPI 的错误用法给予报错处理；
对于不合法加载引用 JSAPI 给予报错处理；
支持指定 JSAPI 版本；
支持插件加载；
允许多次执行加载操作，网络资源不会重复请求，便于大型工程模块管理；
支持IE9以上的浏览器，不支持IE8以下

注意（您在2021年12月02日申请以后的key需要配合您的安全密钥一起使用）

JSAPI key和安全密钥的使用

JSAPI key搭配代理服务器并携带安全密钥转发（安全）

1) 引入 JSAPI 使用 Loader 之前增加代理服务器设置脚本标签，设置代理服务器域名或地址，将下面示例代码中的「您的代理服务器域名或地址」替换为您的代理服务器域名或ip地址，其中_AMapService为代理请求固定前缀，不可省略或修改。（注意您这个设置必须是在加载loader.js的脚本引入之前进行设置，否则设置无效。）

项目代码步骤：

1、在index.html页面body中添加密钥

.......
<body>
    <noscript>
      <strong>We're sorry but map-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
          // serviceHost:'您的代理服务器域名或地址/_AMapService',  
          securityJsCode:"xxxxxx"//申请的密钥
      }
    </script>
  </body>
......

2、安装@amap/amap-jsapi-loader 使用

npm i @amap/amap-jsapi-loader --save

页面引入：

import AMapLoader from "@amap/amap-jsapi-loader";

3、实现代码：

当前截取的代码是天气部分

...
<div class="header-content flex align-items">
        <!-- <img src="../../assets/img/index_03.png"/> -->
        <span class="header-left-txt" id="weather" v-if="weatherObj.nightWeather!=weatherObj.dayWeather">
          {{weatherObj.nightWeather}}转{{weatherObj.dayWeather}}
          {{weatherObj.nightTemp?weatherObj.nightTemp+"°C":""}}<i v-show="weatherObj.dayTemp">-</i>{{weatherObj.dayTemp?weatherObj.dayTemp+"°C":""}}
        </span>
        <span class="header-left-txt" id="weather" v-else>
          {{weatherObj.dayWeather}}
          {{weatherObj.nightTemp?weatherObj.nightTemp+"°C":""}}<i v-show="weatherObj.dayTemp">-</i>{{weatherObj.dayTemp?weatherObj.dayTemp+"°C":""}}
        </span>
        <!-- <van-icon name="arrow-down" color="#fff" size="14px" class="ml10"/> -->
      </div>
...

// 天气
weatherObj:{
        nightTemp:"",//夜间温度,
        dayTemp:"",//白天温度
        dayWeather:"",//白天天气
        nightWeather:"",//夜间天气
}

// 天气
    loadWeather(city) {
      return new Promise((reslove, reject) => {
        AMapLoader.load({
          key: "xxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
          // version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ["AMap.Weather"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          AMapUI: {
            // 是否加载 AMapUI，缺省不加载
            version: "1.1", // AMapUI 缺省 1.1
            plugins: [] // 需要加载的 AMapUI ui插件
          }
        }).then(AMap => {
            //创建天气查询实例
            let weather = new AMap.Weather();
            //执行实时天气信息查询
            weather.getForecast(city?city:"武汉市", (err, data)=> {
                // console.log(err, data);
                if(data.info=="OK"){
                  let forecasts = data.forecasts[0];
                  this.weatherObj = forecasts;
                  console.log(this.weatherObj,"天气")
 
                }else{
                  console.log("获取天气失败");
                }
            });
            reslove();
          })
          .catch(e => {
            console.log(e, "高德地图加载失败");
            reject(e);
          });
      });
    }

可以根据手机定位获取当前天气功能，或者可以实现切换城市获取天气。

mounted(){
     this.loadWeather("武汉");//高德天气
}

文档查看：天气-服务-教程-地图 JS API v2.0 | 高德地图API

到此这篇关于vue使用高德地图实现实时天气预报功能的文章就介绍到这了,更多相关vue实时天气预报内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue.js性能优化N个技巧(值得收藏)
本文主要还是针对 Vue.js 2.x 版本，毕竟接下来一段时间，Vue.js 2.x 还是我们工作中的主流版本，对vue.js性能优化技巧相关知识感兴趣的朋友一起看看吧
2021-09-09
一文详解Vue3中的setup函数的用法和原理
在 Vue3 中,setup 函数是一个新引入的概念,它代替了之前版本中的 data、computed、methods 等选项,用于设置组件的初始状态和逻辑,本文将主要介绍Setup的基本用法和少量原理
2024-02-02
Element PageHeader页头的使用方法
这篇文章主要介绍了Element PageHeader页头的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
带你一步步从零搭建一个Vue项目
Vue.js是现在比较优秀的Web前端框架,非常推荐大家入门学习,这篇文章主要给大家介绍了关于如何一步步从零搭建一个Vue项目的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
Vue实现天气预报小应用
这篇文章主要为大家详细介绍了Vue实现天气预报小应用，查询一些城市的天气情况，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue使用Axios做ajax请求详解
本篇文章主要介绍了vue使用Axios做ajax请求详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
Vue中computed和watch有哪些区别
这篇文章主要介绍了Vue中computed和watch有哪些区别，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12
Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条
这篇文章主要介绍了Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-06-06
Vue组件高级通讯之$children与$parent
这篇文章主要为大家介绍了Vue组件高级通讯之$children与$parent，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
avue-crud多级复杂的动态表头的实现示例
Avue.js 是基于现有的element-ui库进行的二次封装，本文主要介绍了avue-crud多级复杂的动态表头，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12