用 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. 前期准备

前往高德开放平台注册账号
进入「应用管理」→ 创建新应用 → 获取 Key
在「安全设置」中添加域名白名单（本地开发可填 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) => {
  // 初始化地图相关操作
});

四、功能扩展建议

接入真实天气数据
- 使用高德天气查询API
- 根据获取的城市名称请求天气详情

增加城市切换功能

javascript

复制

javascript 复制代码

const changeCity = (cityName) => {
  // 调用天气API获取新城市数据
}

添加加载状态

javascript

复制

csharp 复制代码

const isLoading = ref(true);
// API请求完成后设置为false

五、注意事项

Key 安全保护
- 切勿将 Key 直接暴露在前端代码中（生产环境应通过后端转发）
- 严格设置安全密钥（_AMapSecurityConfig）

错误处理优化

javascript

复制

ini 复制代码

citySearch.getLocalCity((status, result) => {
  if (status === 'error') {
    console.error('定位失败:', result.info);
  }
});

样式兼容性
- 使用 flex 布局替代 float
- 添加响应式设计（媒体查询