用 Vue3 + 高德地图 API 构建实时天气展示系统

一、项目概述

本教程将基于 Vue3 框架与高德地图 API,实现一个包含实时时间、地理位置自动识别的天气看板系统。效果包含:

  • 实时显示本地时间(每秒更新)
  • 自动定位当前所在城市
  • 天气信息可视化展示(温度/风力/湿度等)

二、核心代码解析

1. 模板结构(语义化布局)

html

复制

xml 复制代码
<template>
  <div class="container">
    <!-- 导航栏:时间 + 城市切换 -->
    <nav class="nav">
      <div class="time">{{ localTime }}</div>
      <div class="city">切换城市</div>
    </nav>
    
    <!-- 天气信息主体 -->
    <main class="city-info">
      <div class="city-name">{{ weatherData.city }}</div>
      <div class="weather">{{ weatherData.weather }}</div>
      <h2 class="temp"><em>{{ weatherData.temperature }}</em>℃</h2>
      <div class="detail">
        <span>风力:{{ weatherData.windPower }}</span>
        <span>风向:{{ weatherData.windDirection }}</span>
        <span>湿度:{{ weatherData.humidity }}</span>
      </div>
    </main>
  </div>
</template>

运行 HTML

2. 脚本逻辑(组合式API)

javascript

复制

xml 复制代码
<script setup>
import { ref, onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

// 响应式数据
const localTime = ref("00:00");
const weatherData = ref({
  city: "北京",
  weather: "晴",
  temperature: "20",
  windPower: "3级",
  windDirection: "东北",
  humidity: "80%"
});

// 初始化地图定位
const initMap = () => {
  AMapLoader.load({
    key: '你的高德Key', // 需替换为真实Key
    version: '2.0',
    plugins: ['AMap.CitySearch']
  }).then((AMap) => {
    AMap.plugin('AMap.CitySearch', function() {
      const citySearch = new AMap.CitySearch();
      citySearch.getLocalCity((status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          weatherData.value.city = result.city.replace('市', ''); // 更新城市名
        }
      });
    });
  });
};

// 生命周期钩子
onMounted(() => {
  initMap();
  setInterval(() => {
    localTime.value = new Date().toLocaleTimeString(); // 每秒更新时间
  }, 1000);
});
</script>

3. 样式设计(Scoped样式)

css

复制

xml 复制代码
<style scoped>
.container {
  min-height: 100vh;
  background: rgba(0,0,0,0.6);
  color: #fff;
}
.nav {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.city-info {
  text-align: center;
  margin-top: 2rem;
}
.temp em {
  font-size: 4rem;
  font-style: normal;
}
</style>

三、高德地图 API 接入指南

1. 前期准备

  1. 前往高德开放平台注册账号
  2. 进入「应用管理」→ 创建新应用 → 获取 Key
  3. 在「安全设置」中添加域名白名单(本地开发可填 localhost

2. 重要配置

index.html 中添加安全协议(解决本地调用问题):

html

复制

xml 复制代码
<!-- 放在 head 标签内 -->
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: '你的安全密钥', // 高德后台获取
  };
</script>

运行 HTML

3. API 核心方法

javascript

复制

javascript 复制代码
AMapLoader.load({
  key: 'YOUR_KEY',
  version: '2.0',
  plugins: ['AMap.CitySearch'] // 按需加载插件
}).then((AMap) => {
  // 初始化地图相关操作
});

四、功能扩展建议

  1. 接入真实天气数据

    • 使用高德天气查询API
    • 根据获取的城市名称请求天气详情
  2. 增加城市切换功能

    javascript

    复制

    javascript 复制代码
    const changeCity = (cityName) => {
      // 调用天气API获取新城市数据
    }
  3. 添加加载状态

    javascript

    复制

    csharp 复制代码
    const isLoading = ref(true);
    // API请求完成后设置为false

五、注意事项

  1. Key 安全保护

    • 切勿将 Key 直接暴露在前端代码中(生产环境应通过后端转发)
    • 严格设置安全密钥(_AMapSecurityConfig
  2. 错误处理优化

    javascript

    复制

    ini 复制代码
    citySearch.getLocalCity((status, result) => {
      if (status === 'error') {
        console.error('定位失败:', result.info);
      }
    });
  3. 样式兼容性

    • 使用 flex 布局替代 float
    • 添加响应式设计(媒体查询
相关推荐
慧一居士27 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead29 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js