npmpackage.info

Gathering detailed insights and metrics for @uiw/react-amap-auto-complete

@uiw/react-amap-auto-complete - 7.1.4 | npmpackage.info

@uiw/react-amap-auto-complete

基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。

7.1.4

449

MIT

TypeScript

677.00 B

45,778 5.3

Installations

npm install @uiw/react-amap-auto-complete

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.19.0

NPM Version

10.8.2 Score

61.8

Supply Chain

78.4

Quality

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

7

Total

263

Closed

121

Merged

135

Issues

Open

45

Total

119

Closed

74

Releases

127

v7.1.4

Updated on Mar 30, 2025

v7.1.3

Updated on Sep 20, 2024

v7.1.2

Updated on Sep 19, 2024

v7.1.1

Updated on Aug 30, 2024

v7.1.0

Updated on Jul 11, 2024

v7.0.2

Updated on Jul 04, 2024

View All 127 releases

Languages

TypeScript

HTML

Less

CSS

Shell

TypeScript (97.28%)

HTML (2.27%)

Less (0.24%)

CSS (0.14%)

Shell (0.06%)

Developer

uiwjs

Download Statistics

Total Downloads

45,778

Last Day

Last Week

208

Last Month

803

Last Year

11,550

GitHub Statistics

MIT License

449 Stars

685 Commits

69 Forks

5 Watchers

11 Branches

20 Contributors

Updated on Mar 31, 2025

Bundle Size

1.46 kB

Minified

677.00 B

Minified + Gzipped

Bundlephobia

Sponsor this package

https://jaywcjlove.github.io/#/sponsor

Maintainers

View All 20 Contributors

Package Meta Information

Latest Version

7.1.4

Package Id

@uiw/react-amap-auto-complete@7.1.4

Unpacked Size

12.39 kB

Size

4.13 kB

File Count

NPM Version

10.8.2

Node Version

20.19.0

Published on

Mar 30, 2025

Total Downloads

Cumulative downloads

Total Downloads

45,778

Last Day

60%

Compared to previous day

Last Week

-4.1%

208

Compared to previous week

Last Month

12%

803

Compared to previous month

Last Year

-29.5%

11,550

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@uiw/react-amap-map @uiw/react-amap-types @uiw/react-amap-utils

Peer Dependencies

react react-dom

AutoComplete 输入提示

通常情况下，开发者需要根据表单控件相关事件的触发来执行 AMap.AutoComplete 的 search 方法，并将返回结果绘制成DOM显示到页面上。除此之外，高德JS API还提供了一套默认的UI来帮助开发者节省时间、提升效率，自动在页面相应的表单控件上监听输入并显示匹配结果。

1import { AutoComplete } from '@uiw/react-amap';
2// 或者单独安装使用
3import { AutoComplete } from '@uiw/react-amap-auto-complete';

基本用法

1import React, { useState, useEffect, useRef } from 'react';
2import ReactDOM from 'react-dom';
3import { APILoader, AutoComplete } from '@uiw/react-amap';
4
5const Example = () => {
6  const mapRef = useRef();
7  const [data, setData] = useState();
8  const [city, setCity] = useState('上海市');
9  const [input, setInput] = useState();
10  useEffect(() => {
11    setInput(mapRef.current);
12  }, []);
13  return (
14    <>
15      <input type="text" ref={mapRef} />
16      <div style={{ width: '100%' }}>
17        {input && (
18          <AutoComplete
19            input={input}
20            onSelect={(opts) => {
21              setData(opts);
22              console.log('@@@@', opts)
23            }}
24          />
25        )}
26        <pre style={{ padding: 10, marginTop: 10 }}>
27          {data ? JSON.stringify(data, null, 2) : '{请在输入框输入内容，下拉列表选择...}'}
28        </pre>
29      </div>
30    </>
31  );
32}
33
34const Mount = () => (
35  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
36    <Example />
37  </APILoader>
38);
39
40export default Mount;

Props

参数	说明	类型	默认值
type	输入提示时限定POI类型，多个类型用 `\|` 分隔，目前只支持Poi类型编码如“050000” 默认值：所有类别	`string`	-
city	输入提示时限定城市。可选值：城市名（中文或中文全拼）、citycode、adcode；默认值：“全国”	`string`	-
datatype	返回的数据类型。可选值：all-返回所有数据类型、poi-返回POI数据类型、bus-返回公交站点数据类型、busline-返回公交线路数据类型目前暂时不支持多种类型	string	-
citylimit	是否强制限制在设置的城市内搜索,默认值为：false，true：强制限制设定城市，false：不强制限制设定城市	boolean	-
input	可选参数，用来指定一个input输入框，设定之后，在input输入文字将自动生成下拉选择列表。支持传入输入框DOM对象的id值，或直接传入输入框的DOM对象。	string/HTMLInputElement	-
output	可选参数，指定一个现有的div的id或者元素，作为展示提示结果的容器，当指定了input的时候有效，缺省的时候将自动创建一个显示结果面板	string/HTMLDivElement	-
outPutDirAuto	默认为true，表示是否在input位于页面较下方的时候自动将输入面板显示在input上方以避免被遮挡	boolean	-
closeResultOnScroll	页面滚动时关闭搜索结果列表，默认 true	boolean	-
lang	设置检索语言类型，默认中文 'zh_cn'	string	-

事件

参数	说明	类型
onChoose	鼠标或者键盘上下键选择POI信息时触发此事件	`(event: AutoCompleteEventsCallback): void;`
onSelect	鼠标点击或者回车选中某个POI信息时触发此事件	`(event: AutoCompleteEventsCallback): void;`

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

Score

5.3

/10

Last Scanned on 2025-03-24

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More