uniapp 使用高德地图获取天气

uniapp yekong

js

import AMapLoader from '@amap/amap-jsapi-loader';
created() {
            var that = this;
            AMapLoader.load({
                "key": "your key", // 申请好的Web端开发者Key,首次调用 load 时必填
                "version": "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
                "plugins": ['AMap.Weather'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
                "AMapUI": { // 是否加载 AMapUI,缺省不加载
                    "version": '1.1', // AMapUI 缺省 1.1
                    "plugins": [], // 需要加载的 AMapUI ui插件
                },
                "Loca": { // 是否加载 Loca, 缺省不加载
                    "version": '1.3.2' // Loca 版本,缺省 1.3.2
                },
            }).then((AMap) => {
                AMap.plugin('AMap.Weather', function() {
                    //创建天气查询实例
                    var weather = new AMap.Weather();

                    //执行实时天气信息查询
                    weather.getForecast('宣州区', function(err, data) {
                        console.log(err, data);
                        that.data = data;
                    });
                })
            });
        },

实例

<template>
    <div class="tianqi">
        <div class="tianqilist">
            <div class="tianqiitem">
                <div class="tqtop">
                    <div class="tqtopl">
                        {{data.reportTime|gettime}}
                    </div>
                    <div class="tqtopr">
                        {{data.reportTime|getdays}}
                    </div>
                </div>
                <div class="tqbody">
                    <!-- <div class="tqimg">
                        <image src="../../static/tianqiimg.png" mode=""></image>
                    </div> -->
                    <div class="tqbodyr">
                        <p>{{data.forecasts[0].dayWeather}} I {{data.forecasts[0].dayWindDir}} {{data.forecasts[0].dayWindPower}}级</p>
                        <p>温度:{{data.forecasts[0].dayTemp}}℃</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import AMapLoader from '@amap/amap-jsapi-loader';
    import moment from 'moment'
    export default {
        data() {
            return {
                data: {}
            }
        },
        components: {

        },
        filters: {
            getdays: function(next) {
                return moment(next).format('YYYY-MM-DD');
            },
            gettime: function(next) {
                return moment(next).format('HH:mm');
            },
        },
        created() {
            var that = this;
            AMapLoader.load({
                "key": "your key", // 申请好的Web端开发者Key,首次调用 load 时必填
                "version": "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
                "plugins": ['AMap.Weather'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
                "AMapUI": { // 是否加载 AMapUI,缺省不加载
                    "version": '1.1', // AMapUI 缺省 1.1
                    "plugins": [], // 需要加载的 AMapUI ui插件
                },
                "Loca": { // 是否加载 Loca, 缺省不加载
                    "version": '1.3.2' // Loca 版本,缺省 1.3.2
                },
            }).then((AMap) => {
                AMap.plugin('AMap.Weather', function() {
                    //创建天气查询实例
                    var weather = new AMap.Weather();

                    //执行实时天气信息查询
                    weather.getForecast('宣州区', function(err, data) {
                        console.log(err, data);
                        that.data = data;
                    });
                })
            });
        },
    }
</script>

高德地图天气api地址

喜欢