Weather 天气查询服务

天气查询服务，根据城市名称或区域编码返回城市天气预报信息，包括实时天气信息和四天天气预报。

import { Weather } from '@uiw/react-amap';
import { Weather } from '@uiw/react-amap-weather';

基本用法

import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { APILoader, Weather } from '@uiw/react-amap';

const Example = () => {
  const [data, setData] = useState();
  const [city, setCity] = useState('上海市');
  return (
    <>
      <button> setCity('上海市')}&gt;
        上海市
      </button>
      <button> setCity('北京市')}&gt;
        北京市
      </button>
      <button> setCity('黄冈市')}&gt;
        黄冈市
      </button>
      <div style="{{">
         {
            console.log('返回数据：', data);
            setData(data);
          }}
        /&gt;
        <pre style="{{">          {data ? JSON.stringify(data, null, 2) : '{}'}
        </pre>
      </div>
    
  );
}

const Mount = () =&gt; (
  
    
  
);

export default Mount;

查询四天预报天气

import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { APILoader, Weather } from '@uiw/react-amap';

const Example = () => {
  const [data, setData] = useState();
  const [city, setCity] = useState('上海市');
  return (
    <>
      <button> setCity('上海市')}&gt;
        上海市
      </button>
      <button> setCity('北京市')}&gt;
        北京市
      </button>
      <button> setCity('黄冈市')}&gt;
        黄冈市
      </button>
      <div style="{{">
         {
            console.log('返回数据：', data);
            setData(data);
          }}
        /&gt;
        <pre style="{{">          {data ? JSON.stringify(data, null, 2) : '{}'}
        </pre>
      </div>
    
  );
}

const Mount = () =&gt; (
  
    
  
);

export default Mount;

切换类型

import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { APILoader, Weather } from '@uiw/react-amap';

const Example = () => {
  const [data, setData] = useState();
  const [type, setType] = useState('live');
  return (
    <>
      <button> setType('live')}&gt;
        实时天气信息:live
      </button>
      <button> setType('forecast')}&gt;
        四天预报天气:forecast
      </button>
      <div style="{{">
         {
            console.log('返回数据：', type, data);
            setData(data);
          }}
        /&gt;
        <pre style="{{">          {data ? JSON.stringify(data, null, 2) : '{}'}
        </pre>
      </div>
    
  );
}

const Mount = () =&gt; (
  
    
  
);

export default Mount;

不使用组件

import ReactDOM from 'react-dom';
import React, { useEffect, useState, useRef } from 'react';
import { APILoader } from '@uiw/react-amap';

const Example = () => {
  const [data, setData] = useState();
  useEffect(() => {
    AMap.plugin(['AMap.Weather'], () => {
      const instance = new AMap.Weather({});
      instance.getForecast('上海市', (status, result) => {
        if(status === 'complete'){
          setData(result);
        } else {
          setData(result);
        }
      });
    });
  }, []);
  return (
    <>
      <div style="{{">
        <pre style="{{">          {data ? JSON.stringify(data, null, 2) : '{正在获取}'}
        </pre>
      </div>
    
  );
}

const Mount = () =&gt; (
  
    
  
);

export default Mount;

Props

事件