vue js获取当地城市以及天气状况

引入高德地图API

在html文件中引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=这里填写你申请的密钥，获取地址：https://lbs.amap.com/api/javascript-api/guide/abc/prepare"></script>

methods中定义方法

 //获取当地城市及天气
    async getTianQi() {
        var that =this
      AMap.plugin("AMap.CitySearch",async function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(async function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            var city = result.city;
            console.log(city);
            var result = await that.$http.get(
              "http://wthrcdn.etouch.cn/weather_mini?city=" + city
            );
           //result就是查询到的信息 最近五天的天气情况
            var res = result.data.data.forecast;
            console.log(res[0]);
            that.weather=res[0].type
            that.temper=res[0].high.slice(3,4)
          }
        });
      });
    },

也可以通过H5的地理定位获取当前城市信息，再通过上述的天气查询接口进行查询，更方便