vue2 引入高德地图API根据城市定位查询天气

前言

一、高德地图API

二、使用步骤

前言

本文基于在创作数据大屏时，需要实时显示当前定位的天气情况，因而引入高德地图API来实现天气的数据可视化。

参考文章手把手教你Vue+ECharts+高德地图API实现天气预报数据可视化

效果图

一、高德地图API

使用高德地图API开发地图应用之前需要的一些准备工作。

先注册一个高德地图API开发者账号。
注册成功后，登录账号，进入到控制台页面。在【应用管理】-【我的应用】创建新应用。

选择相应应用类型后新建应用

添加key

点击查看【安全密钥使用说明】

找到方式二，在项目中使用JS API的方法（JSAPI key搭配静态安全密钥以明文设置（不安全，建议开发环境用））

二、使用步骤

1.引入

在index.html文件引入地图 JSAPI 脚本。

引入地图 JSAPI 脚本之前增加设置 JSAPI 安全密钥的脚本标签，并将您的安全密钥【您申请的安全密钥】替换为您的安全密钥；（注意这个设置必须是在 JSAPI 的脚本加载之前进行设置，否则设置无效。）

【您申请的key】替换为申请到的key

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'您申请的安全密钥',
        }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

除直接引入JSAPI 脚本之外，还可以点击查看更多JS API加载方式

2.获取当前定位

想要获取天气情况我们先要获得定位，这是需要用到高德地图API。在【开发支持】-【地图 JS API 2.0】-【进阶教程】-【服务插件和工具】-【定位】，找到IP定位获取当前城市信息的方法。

把获取城市定位的代码封装成getCityPosition方法，在mounted()调用该方法获取到当前城市信息。

getCityPosition（）{
  AMap.plugin('AMap.CitySearch', function () {
      var citySearch = new AMap.CitySearch()
      citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          // 查询成功，result即为当前所在城市信息
        }
      })
  })

}

3.获取城市的天气信息

上面获取到城市信息后，可以通过API传入城市，获取到相应的天气信息。在【开发支持】-【地图 JS API 2.0】-【进阶教程】-【服务插件和工具】-【实时查询天气】，可以实时查询城市的天气信息。

把获取城市定位的代码封装成getCityWeather方法，在上面获取到城市后调用该方法获取到当前城市的天气信息。

    // 获取天气
    getCityWeather(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'){
          
          }
        });
      });
    },

总结

以上内容就是目前使用到的高德地图API的功能，还有很多功能待探索，在今后使用到其他功能时再做记录。