高德地图--获取温度显示

申请高德地图应用key：我的应用 | 高德控制台

高德地图官方指导文档：天气-服务-教程-地图 JS API v2.0 | 高德地图API

在https中html显示时，使用定时器刷新显示内容，添加如下：

// 替换自己的key获取支持
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=14f73789b3b6558bddac9f3f6301fd83"></script> 

// 函数获取
<script type="text/javascript">
    $('document').ready(function () {
        $("body").css('visibility', 'visible');
        var localData = [$('#teacher').val(), $('#start').val() + '/' + $('#end').val(), $('#leader').val()]
        localStorage.setItem("data", localData);
        
    })

  /* setInterval 设置定时器 */
  let intervalId = setInterval(function () {
    //加载天气查询插件
    AMap.plugin('AMap.Weather', function() {
        //创建天气查询实例
        var weather = new AMap.Weather();

        //执行实时天气信息查询
        weather.getLive('杭州市', function(err, data) {
            console.log(err, data);
            // 更改显示内容
            document.getElementById('temperature').innerHTML = data.temperature + "°C";
        });
    });
  }, 500)
</script>

可以显示最近几天的详细天气预报

//加载天气查询插件
    AMap.plugin('AMap.Weather', function() {
        //创建天气查询实例
        var weather = new AMap.Weather();

        //执行实时天气信息查询
        weather.getForecast('深圳市', function(err, data) {
            console.log(err, data);
            // 天气、温度
            document.getElementById('dayWeather').innerHTML = data.forecasts[0].dayWeather;
            document.getElementById('temperature').innerHTML = data.forecasts[0].nightTemp + "-" + data.forecasts[0].dayTemp + "°C";
        });
    });

运行效果：