## 实现效果

使用echarts的天气地图组件, 做一个有趣的天气地图, 展示了全国各省省会的天气情况, 效果如下图

接口可一次性返回全国344个主要城市天气，包含城市名称、城市坐标、实况天气、实况温度、白天夜间天气、白天夜间温度、气象灾害预警。
默认只返回33个省会城市及直辖市。如果想显示全部城市，接口可传参showlevel=2
延伸效果：放大地图后, 可以显示出所有的地级市天气

` Tips：代码里使用了我注册的key，请求次数应该会超，请自行注册替换成你自己的`
`更新: 增加了天气图标, 温度高于20度颜色变红并增加一个🌡图标`

![map-1.png](https://developer.qcloudimg.com/http-save/yehe-8626216/54523d56bcd124045fbd9589fad1dc01.png)


## 完整HTML代码,复制可直接打开看效果

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>古风天气实况地图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <style>
        body { margin: 0; background-color: #f4ecd8; overflow: hidden; }
        #main { width: 100vw; height: 100vh; }
    </style>
</head>
<body>

<div id="main"></div>

<script>
    const chart = echarts.init(document.getElementById('main'));

    // 初始化地图基础配置
    const option = {
        backgroundColor: '#f4ecd8', // 羊皮纸背景色
        geo: {
            map: 'china',
            roam: true, // 开启缩放平移
            zoom: 1.2,
            label: { show: false },
            itemStyle: {
                areaColor: '#fdf9ee',
                borderColor: '#b9a381',
                borderWidth: 1.2
            },
            emphasis: {
                itemStyle: { areaColor: '#f5f0e1' }
            }
        },
        series: [{
            name: '天气打点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [],
            symbolSize: 1, // 隐藏默认散点，靠 label 渲染气泡
            label: {
                show: true,
                formatter: (params) => {
                    console.log(params.data)
                    const wea = params.data.value[5] || ""; // 接口返回的天气文字，如“晴”
                    // 2. 天气图标映射逻辑
        let weaIcon = "☀️"; // 默认图标
        if (wea.includes("晴")) weaIcon = "☀️";
        else if (wea.includes("云")) weaIcon = "⛅";
        else if (wea.includes("阴")) weaIcon = "☁️";
        else if (wea.includes("雨")) weaIcon = "🌧️";
        else if (wea.includes("雪")) weaIcon = "❄️";

                    // params.data.value = [经度, 纬度, 温度, 城市名]
                    if(params.data.value[2] > 20){
                        return `{city|${params.data.cityName}}\n{weatherIcon|${weaIcon}}\n{temp2|🌡${params.data.value[2]}°C}`;
                    } else {
                        return `{city|${params.data.cityName}}\n{weatherIcon|${weaIcon}}\n{temp|${params.data.value[2]}°C}`;    
                    }
                    
                },
                rich: {
                    city: {
                        color: '#333',
                        fontSize: 12,
                        backgroundColor: '#fff',
                        padding: [4, 10, 0, 10],
                        borderRadius: [8, 8, 0, 0],
                        align: 'center',
                        width: 50
                    },
                    temp: {
                        color: '#e67e22',
                        fontSize: 14,
                        fontWeight: 'bold',
                        backgroundColor: '#fff',
                        padding: [0, 10, 4, 10],
                        borderRadius: [0, 0, 8, 8],
                        align: 'center',
                        width: 50
                    },
                    temp2: {
                        color: '#f00',
                        fontSize: 14,
                        fontWeight: 'bold',
                        backgroundColor: '#fff',
                        padding: [0, 10, 4, 10],
                        borderRadius: [0, 0, 8, 8],
                        align: 'center',
                        width: 50
                    },
                    weatherIcon: {
                        height: 30,
                        width: 30,
                        align: 'center',
                        backgroundColor: '#fff',
                        padding: [2, 12, 2, 12]
                    },
                },
                shadowBlur: 8,
                shadowColor: 'rgba(0,0,0,0.15)',
                shadowOffsetY: 4
            }
        }]
    };

    chart.setOption(option);

    // 异步获取数据逻辑
    async function fetchWeatherData() {
        // 请替换appid和secret
        let url = "http://pddfps.tianqiapi.com/free/cityleader?&appid=17256853&appsecret=YtFbK6VP";
        try {
            const response = await fetch(url);
            const res = await response.json();

            if (res && res.data) {
                // 直接转换接口返回的 lon 和 lat
                const mapData = res.data.map(item => {
                    return {
                        cityName: item.city,
                        // ECharts 坐标格式: [经度, 纬度, 数值]
                        value: [
                            parseFloat(item.lon), 
                            parseFloat(item.lat), 
                            item.tem,
                            item.tem_min,
                            item.tem_max,
                            item.wea
                        ]
                    };
                });

                chart.setOption({
                    series: [{ data: mapData }]
                });
            }
        } catch (error) {
            console.error("请求失败，请检查跨域配置或接口协议:", error);
            alert("无法获取天气数据，请检查浏览器控制台(F12)查看跨域(CORS)报错");
        }
    }

    fetchWeatherData();

    // 响应式缩放
    window.onresize = () => chart.resize();
</script>

</body>
</html>
```



使用echarts的天气地图组件, 做一个有趣的天气地图, 展示了全国各省省会的天气情况, 效果如下图

用echarts+天气接口实现全国天气地图

使用echarts的天气地图组件, 做一个有趣的天气地图, 展示了全国各省省会的天气情况

编程语言

使用ECharts制作全国天气地图，展示各省会城市实时天气数据。支持缩放查看地级市天气，温度高于20℃自动标红显示🌡图标。包含晴、雨、雪等天气图标，采用古风羊皮纸背景设计。提供完整HTML代码，可直接复制使用。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

用echarts+天气接口实现全国天气地图-腾讯云开发者社区-腾讯云

用echarts+天气接口实现全国天气地图

用echarts+天气接口实现全国天气地图

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐