npmpackage.info

Gathering detailed insights and metrics for @uiw/react-baidu-map-overview-map-control

@uiw/react-baidu-map-overview-map-control - 2.7.3 | npmpackage.info

@uiw/react-baidu-map-overview-map-control

基于 React 封装的百度地图组件，支持 React Hook，帮助你轻松的接入地图到 React 项目中。

2.7.3

232

MIT

TypeScript

13.44 kB

4.4

Installations

npm install @uiw/react-baidu-map-overview-map-control

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.19.1

NPM Version

8.19.4 Pull Requests

Open

6

Total

247

Closed

148

Merged

93

Issues

Open

42

Total

92

Closed

50

Releases

v2.7.3

Updated on May 02, 2025

v2.7.2

Updated on Jun 24, 2024

v2.7.1

Updated on Jan 23, 2024

v2.7.0

Updated on Dec 01, 2023

v2.6.3

Updated on Nov 28, 2023

v2.6.2

Updated on Aug 24, 2023

View All 63 releases

Languages

TypeScript

HTML

Less

Shell

TypeScript (98.85%)

HTML (0.99%)

Less (0.14%)

Shell (0.03%)

Developer

uiwjs

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

232 Stars

522 Commits

22 Forks

6 Watchers

8 Branches

12 Contributors

Updated on Jul 10, 2025

Sponsor this package

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

Maintainers

View All 12 Contributors

Package Meta Information

Latest Version

2.7.3

Package Id

@uiw/react-baidu-map-overview-map-control@2.7.3

Unpacked Size

13.44 kB

Size

3.66 kB

File Count

NPM Version

8.19.4

Node Version

20.19.1

Published on

May 02, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@babel/runtime @uiw/react-baidu-map-map @uiw/react-baidu-map-utils

Peer Dependencies

react react-dom

OverviewMapControl 缩略地图控件

缩略地图控件。你也可以使用 Map 组件 widget 属性来设置控件更方便。

1import { OverviewMapControl, useOverviewMapControl } from '@uiw/react-baidu-map';
2// 或者单独安装使用
3import OverviewMapControl, { useOverviewMapControl } from '@uiw/react-baidu-map-overview-map-control';

基本用法

1import React, { useState, useRef } from 'react';
2import { Map, APILoader, OverviewMapControl } from '@uiw/react-baidu-map';
3
4const Example = () => {
5  const [show, setShow] = useState(true);
6  return (
7    <div>
8      <button onClick={() => setShow(!show)}>
9        {show ? '关闭' : '开启'}
10      </button>
11      <Map zoom={13} style={{ height: 300 }}>
12        {show && (
13          <OverviewMapControl isOpen />
14        )}
15        <OverviewMapControl
16          isOpen
17          visiable={show}
18          offset={new BMap.Size(40, 40)}
19          anchor={BMAP_ANCHOR_TOP_RIGHT}
20          onViewChanged={() => {
21            console.log('onViewChanged ..')
22          }}
23        />
24      </Map>
25    </div>
26  );
27}
28
29const Demo = () => (
30  <div style={{ width: '100%' }}>
31    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
32      <Example />
33    </APILoader>
34  </div>
35);
36
37export default Demo;

使用 hooks

overviewMapControl, setGeolocationControl

1import React from 'react';
2import { useRef, useEffect, useState } from 'react';
3import { Map, APILoader, Provider, useMap, useOverviewMapControl } from '@uiw/react-baidu-map';
4
5const Example = () => {
6  const divElm = useRef(null);
7  const [show, setShow] = useState(true);
8  const { setContainer, map } = useMap();
9  const { overviewMapControl } = useOverviewMapControl({
10    map, anchor: BMAP_NAVIGATION_CONTROL_LARGE, visiable: show, isOpen: true,
11  });
12
13  useEffect(() => {
14    if (divElm.current && !map) {
15      setContainer(divElm.current);
16    }
17  }, [map]);
18  return (
19    <>
20      <button onClick={() => setShow(!show)}>
21        {show ? '关闭' : '开启'}
22      </button>
23      <div ref={divElm} style={{ height: '100%' }} />
24    </>
25  );
26}
27
28const Demo = () => (
29  <div style={{ width: '100%', height: '300px' }}>
30    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
31      <Provider>
32        <Example />
33      </Provider>
34    </APILoader>
35  </div>
36);
37export default Demo;

Props

参数	说明	类型	默认值
visiable	覆盖物是否可见。	`boolean`	-
anchor	控件的位置偏移值。	`ControlAnchor`	`BMAP_ANCHOR_TOP_RIGHT`
offset	控件的水平偏移值。	`BMap.Size`	-
size	缩略地图控件的大小	`BMap.Size`	-
isOpen	缩略地图添加到地图后的开合状态，默认为关闭。	`boolean`	-

事件

参数	说明	类型
onViewChanged	缩略地图开合状态发生变化后触发此事件	(event: { type: any, target: any, isOpen: boolean }) => void;
onViewChanging	缩略地图开合状态发生变化过程中触发此事件	(event: { type: any, target: any }) => void;

Pinned-Dependencies

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

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:236: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:242: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:245: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:255: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:263: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pull_request.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/pull_request.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pull_request.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-baidu-map/pull_request.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:43
Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:45
Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:46
Warn: npmCommand not pinned by hash: .github/workflows/pull_request.yml:17
Warn: npmCommand not pinned by hash: .github/workflows/pull_request.yml:19
Warn: npmCommand not pinned by hash: .github/workflows/pull_request.yml:20
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 7 third-party GitHubAction dependencies pinned
Info: 0 out of 6 npmCommand dependencies pinned

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

4.4

/10

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