高德地图获取天气预报

83 阅读1分钟

登录高德开发者平台

lbs.amap.com/?ref=https:…

创建应用并获取key

image.png

<div class="w-box">
    <span class="w-span">{{ weatherInfo.city }}</span>
    <span class="w-span">{{ weatherInfo.temperate }}</span>
    <span class="w-span">{{ weatherInfo.nighttemp }}</span>
</div>
initWeather() {
      //获取实时日期、温度、地区
      let _this = this;
      const urlIp = "https://restapi.amap.com/v3/ip?output=json&key=key";
      jquery.get(urlIp,function(ip){
        debugger
        const city = ip["city"];
        ip = ip["adcode"];
        console.log('ip',ip)
        const urlWeatherBase = "https://restapi.amap.com/v3/weather/weatherInfo?city=" + ip + "&extensions=base&key=key";
        const urlWeatherAll = "https://restapi.amap.com/v3/weather/weatherInfo?city=" + ip + "&extensions=all&key=key";
        _this.weatherInfo.city = city;
        jquery.get(urlWeatherBase,function(weathers){
          const temperature = weathers["lives"][0]["temperature"];
          const weather_log = weathers["lives"][0]["weather"];
          _this.weatherInfo.temperate = temperature + "°";
          jquery.get(urlWeatherAll,function(data){
            const daytemp = data["forecasts"][0]["casts"][0]["daytemp"];
            const nighttemp = data["forecasts"][0]["casts"][0]["nighttemp"];
            _this.weatherInfo.nighttemp = nighttemp + "° " + "/ " + daytemp + "°" + "\xa0\xa0\xa0" + weather_log;
          });
        });
      });
    },