vue使用高德地图api获取当前位置天气预报

1.高德地图官网添加天气应用获取key和密钥

打开高德地图官网https://console.amap.com/ 从控制台中添加应用获取key和安全密钥

2.在vue项目public下的index.html中引入script

在公共文件下的index.html中配置你的key和安全密钥

<script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '安全密钥',
    }
  </script>
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=“你的key值”&plugin=(你需要使用的api)">
    </script>

3.使用api获取天气信息

调用获取当前位置api和天气api

//获取位置
    getCity() {
      let that = this
      if (window) {
        window.AMap.plugin("AMap.CitySearch", function () {
          var citySearch = new window.AMap.CitySearch();
          citySearch.getLocalCity(function (status, result) {
            if (status === "complete" && result.info === "OK") {
              // 查询成功，result即为当前所在城市信息
              that.getWeather(result.city)
            }
          });
        });
      }
    },
    // 获取天气
    getWeather(city) {
      let that = this
      // 加载天气查询插件
      window.AMap.plugin("AMap.Weather", function () {
        // 创建天气查询实例
        let weather = new window.AMap.Weather()
        // 执行实时天气信息查询
        weather.getLive(city, function (err, data) {
          if (data.info == "OK") {
            that.weatherdata = data
          }
        });
      });
    }