Vue简单获取天气 —— 高德开放平台轻松实现

前端

2023-05-06 11:28:18

使用 Vue 获取当前地区天气信息：一步一步的指南

在这个教程中，我们将指导你如何使用 Vue 框架从高德开放平台获取当前地区的天气信息。对于初学者来说，这是一个简单的过程，我们将分步讲解。

步骤 1：注册高德开放平台

首先，你需要注册一个免费的高德开放平台账号。只需提供你的姓名、邮箱和手机号码，即可轻松注册。

步骤 2：获取高德开放平台密钥

注册成功后，你需要获取高德开放平台密钥，以便访问其 API。登录高德开放平台官网，在“密钥管理”中即可获取密钥。

步骤 3：安装 Vue.js

接下来，使用以下命令安装 Vue.js：

npm install vue

步骤 4：创建 Vue 应用

使用以下命令创建一个 Vue 应用：

vue create my-app

步骤 5：在 Vue 应用中使用高德开放平台

安装高德开放平台 SDK：

npm install amap-jsapi

在 Vue 应用中引入高德开放平台 SDK：

import AMap from 'amap-jsapi';

创建高德地图对象：

var map = new AMap.Map('map', {
  resizeEnable: true,
  center: [116.397428, 39.90923],
  zoom: 11
});

获取当前位置

map.plugin('AMap.Geolocation', function() {
  var geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,
    timeout: 10000,
    maximumAge: 0
  });
  geolocation.getCurrentPosition();
  geolocation.on('complete', function(data) {
    console.log(data);
  });
  geolocation.on('error', function(err) {
    console.log(err);
  });
});

使用高德开放平台获取天气信息

AMap.plugin(['AMap.Weather'], function() {
  var weather = new AMap.Weather();
  weather.getLiveWeather({
    city: '110101',
    callback: function(err, data) {
      console.log(data);
    }
  });
});

在 Vue 应用中展示天气信息

<template>
  <div>
    <h1>{{ city }}</h1>
    <p>{{ weather }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: '',
      weather: ''
    };
  },
  created() {
    AMap.plugin(['AMap.Weather'], function() {
      var weather = new AMap.Weather();
      weather.getLiveWeather({
        city: '110101',
        callback: (err, data) => {
          this.city = data.city;
          this.weather = data.weather;
        }
      });
    });
  }
};
</script>