Socket
Socket
Sign inDemoInstall

@uiw/react-amap-weather

Package Overview
Dependencies
2
Maintainers
2
Versions
93
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-amap-weather

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


Version published
Maintainers
2
Weekly downloads
140
decreased by-36.65%

Weekly downloads

Readme

Source

Weather 天气查询服务

Buy me a coffee npm version Downloads

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

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 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) : '{}'}
        </pre>
      </div>
    </>
  );
}

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

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 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;

切换类型

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) : '{}'}
        </pre>
      </div>
    </>
  );
}

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

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={{ 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

参数说明类型默认值
city城市名称/区域编码(如:“杭州市”/“330100”)string-
type获取 查询实时天气信息查询四天预报天气`liveforecast`

事件

参数说明类型
onComplete数据请求完成时触发事件。`(data: WeatherLiveResult
onError数据请求错误时触发事件。(err): void;

Keywords

FAQs

Last updated on 02 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc