Gathering detailed insights and metrics for @uiw/react-amap-info-window
Gathering detailed insights and metrics for @uiw/react-amap-info-window
Gathering detailed insights and metrics for @uiw/react-amap-info-window
Gathering detailed insights and metrics for @uiw/react-amap-info-window
基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
npm install @uiw/react-amap-info-window
Typescript
Module System
Node Version
NPM Version
TypeScript (97.28%)
HTML (2.27%)
Less (0.24%)
CSS (0.14%)
Shell (0.06%)
Total Downloads
50,183
Last Day
40
Last Week
731
Last Month
2,491
Last Year
13,904
MIT License
469 Stars
696 Commits
71 Forks
5 Watchers
11 Branches
21 Contributors
Updated on Jul 04, 2025
Minified
Minified + Gzipped
Latest Version
7.1.8
Package Id
@uiw/react-amap-info-window@7.1.8
Unpacked Size
23.62 kB
Size
5.64 kB
File Count
12
NPM Version
10.8.2
Node Version
20.19.1
Published on
May 28, 2025
Cumulative downloads
Total Downloads
Last Day
-24.5%
40
Compared to previous day
Last Week
13.5%
731
Compared to previous week
Last Month
49.8%
2,491
Compared to previous month
Last Year
-11.5%
13,904
Compared to previous year
2
用于在地图上弹出一个详细信息展示窗体,地图上只允许同时展示 1
个信息窗体。
1import { InfoWindow } from '@uiw/react-amap'; 2// 或者单独安装使用 3import { InfoWindow } from '@uiw/react-amap-info-window';
1import ReactDOM from 'react-dom'; 2import React, { useState, useRef } from 'react'; 3import { Map, APILoader, InfoWindow } from '@uiw/react-amap'; 4 5const Example = () => { 6 const [show, setShow] = useState(true); 7 // 构建信息窗体中显示的内容 8 const info = []; 9 info.push("<div class='input-card content-window-card'><div><img style=\"float:left;width:67px;height:16px;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> "); 10 info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>"); 11 info.push("<p class='input-item'>电话 : 010-84107000 邮编 : 100102</p>"); 12 info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>"); 13 return ( 14 <> 15 <button onClick={() => setShow(!show)}> 16 {show ? '隐藏' : '显示'} 17 </button> 18 <div style={{ width: '100%', height: '500px' }}> 19 <Map zoom={14} center={[116.397637, 39.900001]}> 20 <InfoWindow 21 visible={show} 22 content={info.join('')} 23 // position={[116.397046, 39.915698]} 24 onClose={(evn) => { 25 console.log('evn', evn); 26 }} 27 /> 28 </Map> 29 </div> 30 </> 31 ); 32} 33 34const Mount = () => ( 35 <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129"> 36 <Example /> 37 </APILoader> 38); 39 40export default Mount;
通过 children
支持 React
的方式展现内容,因为窗口信息内容通过 content
展示内容,它支持 string/HTMLElement
添加事件并不方便。
1import ReactDOM from 'react-dom'; 2import React, { useState, useRef } from 'react'; 3import { Map, APILoader, InfoWindow } from '@uiw/react-amap'; 4 5const Example = () => { 6 const [show, setShow] = useState(true); 7 const [num, setNum] = useState(1) 8 return ( 9 <> 10 <button onClick={() => setShow(!show)}> 11 {show ? '隐藏' : '显示'} 12 </button> 13 <div style={{ width: '100%', height: '500px' }}> 14 <Map zoom={14} center={[116.397637, 39.900001]}> 15 <InfoWindow 16 visible={show} 17 onClose={(evn) => { 18 console.log('evn', evn); 19 }} 20 > 21 <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: 10 }}> 22 <img height={16} src="https://webapi.amap.com/images/autonavi.png"/> 23 <h2> 24 <span style={{color: 'red'}}>{num}</span> - 高德软件 25 </h2> 26 </div> 27 <p>电话:010-84107000 邮编:100102</p> 28 <p>地址:北京市朝阳区望京阜荣街10号首开广场4层</p> 29 <button onClick={() => setNum(num + 1)}> 30 点击事件 + 1 ({num}) 31 </button> 32 </InfoWindow> 33 </Map> 34 </div> 35 </> 36 ); 37} 38 39const Mount = () => ( 40 <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129"> 41 <Example /> 42 </APILoader> 43); 44 45export default Mount;
1import ReactDOM from 'react-dom'; 2import React, { useState, useRef } from 'react'; 3import { Map, APILoader, InfoWindow } from '@uiw/react-amap'; 4 5const Example = () => { 6 const [show, setShow] = useState(true); 7 const [content, setContent] = useState('<div>高德软件</div>'); 8 return ( 9 <> 10 <button onClick={() => setShow(!show)}> 11 {show ? '隐藏' : '显示'} 12 </button> 13 <input type="text" value={content} onChange={(evn) => setContent(evn.target.value)}/> 14 <div style={{ width: '100%', height: '500px' }}> 15 <Map zoom={14} pitch={70} viewMode="3D" center={[116.397637, 39.900001]}> 16 <InfoWindow 17 visible={show} 18 content={content} 19 onClose={(evn) => { 20 console.log('evn', evn); 21 }} 22 /> 23 </Map> 24 </div> 25 </> 26 ); 27} 28 29const Mount = () => ( 30 <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129"> 31 <Example /> 32 </APILoader> 33); 34 35export default Mount;
1import ReactDOM from 'react-dom'; 2import React, { useState, useRef } from 'react'; 3import { Map, Marker, APILoader, InfoWindow } from '@uiw/react-amap'; 4 5const Example = () => { 6 const [show, setShow] = useState(false); 7 const [winPosition, setWinPosition] = useState(); 8 const [content, setContent] = useState('<div>高德软件</div>'); 9 return ( 10 <> 11 <input type="text" value={content} onChange={(evn) => setContent(evn.target.value)}/> 12 <div style={{ width: '100%', height: '300px' }}> 13 <Map zoom={14} center={[116.397637, 39.900001]}> 14 <Marker 15 title="北京市" 16 position={new AMap.LngLat(116.405285,39.904989)} 17 onClick={(evn) => { 18 if (!show) { 19 setWinPosition(new AMap.LngLat(116.405285,39.904989)); 20 setShow(true); 21 } else { 22 setWinPosition(new AMap.LngLat(116.405285,39.904989)); 23 } 24 }} 25 /> 26 <Marker 27 title="北京市" 28 position={new AMap.LngLat(116.415285,39.905589)} 29 onClick={(evn) => { 30 if (!show) { 31 setWinPosition(new AMap.LngLat(116.415285,39.905589)); 32 setShow(true); 33 } else { 34 setWinPosition(new AMap.LngLat(116.415285,39.905589)); 35 } 36 }} 37 /> 38 {winPosition && ( 39 <InfoWindow 40 visible={show} 41 position={winPosition} 42 offset={{ x: 0, y: -10}} 43 content={content} 44 onClose={(evn) => { 45 // console.log('evn2', evn, show); 46 }} 47 /> 48 )} 49 </Map> 50 </div> 51 </> 52 ); 53} 54 55const Mount = () => ( 56 <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129"> 57 <Example /> 58 </APILoader> 59); 60 61export default Mount;
1import ReactDOM from 'react-dom'; 2import React, { useState, useRef } from 'react'; 3import { Map, Marker, APILoader, InfoWindow } from '@uiw/react-amap'; 4 5const Example = () => { 6 const mapRef = useRef(); 7 const winRef = useRef(); 8 const [winPosition, setWinPosition] = useState(); 9 const [content, setContent] = useState('<div>高德软件</div>'); 10 return ( 11 <> 12 <input type="text" value={content} onChange={(evn) => setContent(evn.target.value)}/> 13 <div style={{ width: '100%', height: '300px' }}> 14 <Map ref={mapRef} zoom={14} center={[116.397637, 39.900001]}> 15 <Marker 16 title="北京市" 17 position={new AMap.LngLat(116.405285,39.904989)} 18 onClick={(evn) => { 19 winRef.current.infoWindow.open(mapRef.current.map, new AMap.LngLat(116.405285,39.904989)) 20 }} 21 /> 22 <Marker 23 title="北京市" 24 position={new AMap.LngLat(116.415285,39.905589)} 25 onClick={(evn) => { 26 winRef.current.infoWindow.open(mapRef.current.map, new AMap.LngLat(116.415285,39.905589)) 27 }} 28 /> 29 <InfoWindow 30 ref={winRef} 31 offset={{ x: 0, y: -30}} 32 content={content} 33 /> 34 </Map> 35 </div> 36 </> 37 ); 38} 39 40const Mount = () => ( 41 <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129"> 42 <Example /> 43 </APILoader> 44); 45 46export default Mount;
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | 覆盖物是否可见。 | boolean | - |
position | 信息窗体显示基点位置,默认地图的中间 | LngLat | - |
content | 信息窗体尺寸(isCustom为 true 时,该属性无效) | string/HTMLElement | - |
children | 替代 content ,支持 ReactNode | ReactNode | - |
offset | 信息窗体显示位置偏移量。默认基准点为信息窗体的底部中心(若设置了anchor,则以anchor值为基准点)。 | Pixel | - |
anchor | 信息窗体锚点 | top-left ,top-center ,top-right ,middle-left ,center ,middle-right ,bottom-left ,bottom-center ,bottom-right | bottom-center |
autoMove | 是否自动调整窗体到视野内(当信息窗体超出视野范围时,通过该属性设置是否自动平移地图,使信息窗体完全显示) | boolean | - |
size | 信息窗体显示基点位置,默认地图的中间 | Size | - |
closeWhenClickMap | 控制是否在鼠标点击地图后关闭信息窗体,默认 false ,鼠标点击地图后不关闭信息窗体 | boolean | - |
avoid | autoMove 为 true 时,自动平移到视野内后的上右下左的避让宽度。默认值: [20, 20, 20, 20] | Array<number> | - |
isCustom | 是否自定义窗体。设为 true 时,信息窗体外框及内容完全按照 content 所设的值添加(默认为false,即在系统默认的信息窗体外框中显示 content 内容) | boolean | - |
参数 | 说明 | 类型 |
---|---|---|
onOpen | 信息窗体打开之后触发事件 | (opts: { type: string }): void; |
onClose | 信息窗体关闭之后触发事件 | (opts: { type: string }): void; |
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
11 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 existing vulnerabilities detected
Reason
packaging workflow detected
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
Found 10/30 approved changesets -- score normalized to 3
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
security policy file not detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-06-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