npmpackage.info

@uiw/react-amap-auto-complete

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

7.1.3

442

MIT

TypeScript

12.40 kB

43,406 5.4

Installations

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

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.17.0

NPM Version

10.8.2 Score

59.8

Supply Chain

83.4

Quality

84.2

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

6

Total

261

Closed

121

Merged

134

Issues

Open

45

Total

119

Closed

74

Releases

126

v7.1.3

Published on 20 Sept 2024

v7.1.2

Published on 19 Sept 2024

v7.1.1

Published on 30 Aug 2024

v7.1.0

Published on 11 Jul 2024

v7.0.2

Published on 04 Jul 2024

v7.0.1

Published on 03 Jul 2024

View all 126 releases

Contributors

Unable to fetch Contributors

View all 19 contributors

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

43,406

Last Day

Last Week

142

Last Month

867

Last Year

11,315

GitHub Statistics

442 Stars

683 Commits

70 Forks

6 Watching

11 Branches

19 Contributors

Sponsor this package

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

Maintainers

Package Meta Information

Latest Version

7.1.3

Package Id

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

Unpacked Size

12.40 kB

Size

4.13 kB

File Count

NPM Version

10.8.2

Node Version

20.17.0

Publised On

20 Sept 2024

Total Downloads

Cumulative downloads

Total Downloads

43,406

Last day

-26.9%

Compared to previous day

Last week

-22.4%

142

Compared to previous week

Last month

-28.2%

867

Compared to previous month

Last year

-39.7%

11,315

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

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

Peer Dependencies

react react-dom

Versions

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

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

9

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

1

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

Score

5.4

/10

Last Scanned on 2024-12-30

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