Weather 天气查询服务

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

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

基本用法

`jsx mdx:preview 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 onClick={() => setCity('上海市')}> 上海市 </button> <button onClick={() => setCity('北京市')}> 北京市 </button> <button onClick={() => setCity('黄冈市')}> 黄冈市 </button> <div style={{ width: '100%' }}> <Weather city={city} onComplete={(data) => { console.log('返回数据：', data); setData(data); }} /> <pre style={{ padding: 10, marginTop: 10 }}> {data ? JSON.stringify(data, null, 2) : '{}'} </> ); }

const Mount = () => ( <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129"> <Example /> </APILoader> );

export default Mount;

### 查询四天预报天气

```jsx mdx:preview
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 onClick={() => setCity('上海市')}>
        上海市
      </button>
      <button onClick={() => setCity('北京市')}>
        北京市
      </button>
      <button onClick={() => setCity('黄冈市')}>
        黄冈市
      </button>
      <div style={{
        width: '100%', height: '300px', overflow: 'auto'
      }}>
        <Weather
          city={city}
          type="forecast"
          onComplete={(data) => {
            console.log('返回数据：', data);
            setData(data);
          }}
        />
        <pre style={{ padding: 10, marginTop: 10 }}>
          {data ? JSON.stringify(data, null, 2) : '{}'}
        </pre>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

切换类型

`jsx mdx:preview 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 onClick={() => setType('live')}> 实时天气信息:live </button> <button onClick={() => setType('forecast')}> 四天预报天气:forecast </button> <div style={{ width: '100%', height: '300px' }}> <Weather city="上海市" type={type} onComplete={(data) => { console.log('返回数据：', type, data); setData(data); }} /> <pre style={{ padding: 10, marginTop: 10 }}> {data ? JSON.stringify(data, null, 2) : '{}'} </> ); }

const Mount = () => ( <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129"> <Example /> </APILoader> );

export default Mount;

### 不使用组件

```jsx mdx:preview
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={{ width: '100%' }}>
        <pre style={{ padding: 10, marginTop: 10 }}>
          {data ? JSON.stringify(data, null, 2) : '{正在获取}'}
        </pre>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

Props

事件