vue高德天气接口，加上自定义天气图片

Web端使用高德api获取天气 先获取城市，再通过城市获取天气

1.登录https://lbs.amap.com/，控制台->应用管理->我的应用->创建应用->添加key

*切记选择web端(JS API)

2.在index.html中 引入高德地图的css和js

 <!-- 高德地图js插件-->
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '安全密钥jscode',
    }
  </script>
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=key值&plugin=AMap.DistrictSearch,AMap.Geocoder,AMap.DistrictLayer,AMap.AutoComplete,AMap.PlaceSearch">

    </script>
3.在页面调用高德天气接口

        <div class="date">{{reportTime}}</div>

   <div class="weather">

          <span class="weather-pic"><img :src="imgUrl"></span>

          <span>{{weather}}</span>

          <span>{{temperature}}°C</span>

        </div>

data(){

return{

 weatherList: [

        { id: 1, name: "大雪", url: require("@/assets/icon/01.png") },

        { id: 2, name: "大雨", url: require("@/assets/icon/02.png") },

        { id: 3, name: "小雪", url: require("@/assets/icon/03.png") },

        { id: 4, name: "小雨", url: require("@/assets/icon/04.png") },

        { id: 5, name: "大暴雨", url: require("@/assets/icon/dabaoyu.png") },

        { id: 6, name: "多云", url: require("@/assets/icon/duoyun.png") },

        { id: 7, name: "雷阵雨", url: require("@/assets/icon/leizhenyu.png") },

        { id: 8, name: "霾", url: require("@/assets/icon/mai.png") },

        { id: 9, name: "晴", url: require("@/assets/icon/qing.png") },

        {id: 10,name: "沙尘暴",url: require("@/assets/icon/shachenbao.png"),},

        { id: 11, name: "雾", url: require("@/assets/icon/wu.png") },

        { id: 12, name: "扬尘", url: require("@/assets/icon/yangchen.png") },

        { id: 13, name: "阴", url: require("@/assets/icon/yin.png") },

        { id: 14, name: "雨夹雪", url: require("@/assets/icon/yujiaxue.png") },

        { id: 15, name: "阵雪", url: require("@/assets/icon/zhenxue.png") },

        { id: 16, name: "阵雨", url: require("@/assets/icon/zhenyu.png") },

      ],

      weather: "",

      temperature: "",

      imgUrl: "",

      reportTime: "",

}

} 

getLngLatLocation() {

      const that = this;

      AMap.plugin("AMap.CitySearch", function () {

        var citySearch = new AMap.CitySearch();

        citySearch.getLocalCity(function (status, result) {

          if (status === "complete" && result.info === "OK") {

            AMap.plugin("AMap.Weather", function () {

              var weather = new AMap.Weather();

              // 执行实时天气信息查询

              weather.getLive(result.city, function (err, data) {

                console.log("天气", data);

                that.weather = data.weather;

                that.temperature = data.temperature;

                that.reportTime = data.reportTime;

                for (let i = 0; i < that.weatherList.length; i++) {

                  if (that.weatherList[i].name === data.weather) {

                    console.log(10101010,that.weatherList[i].name,data.weather)

                    that.imgUrl = that.weatherList[i].url;

                    console.log(99999999,that.imgUrl)

                    break;

                  }

                }

                // console.log(10101010,data)

              });

            });

          }

        });

      });

    },

  },