npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@uiw/react-baidu-map

v2.7.1

Published

Baidu Map Components for React.

Downloads

5,080

Readme

这是一个基于 React 封装的百度地图组件,帮助你轻松的接入地图到 React 项目中。除了必须引用的 APILoader/Map 组件外,我们目前提供了最常用的地图组件,能满足大部分简单的业务场景;如果你有更复杂的需求,或者觉得默认提供的组件功能不够,可以使用 Map 组件返回的地图实例,完全自定义一个地图组件,然后根据百度地图原生 API 做百度地图允许你做的一切事情。

文档实例预览: Github | Gitee

[!WARNING] 百度地图的 key 删除了,一些人开发直接复制 key ,导致申请的百度地图开发者 key 流量用完了。

特性

  • ♻️ 自动加载百度地图 SDK(通过创建 Script 标签的形式加载),包括第三方 SDK。
  • 📚 使用 Typescript 编写,集成百度地图 SDK @type 声明文件(包括中文注释)。
  • ⚛️ 支持 React Hook 新增特性(需要 React 16.8+)。
  • 💝 不依赖任何第三方组件。

安装

不依赖 uiw 组件库

npm install @uiw/react-baidu-map --save

使用

import React from 'react';
import { Map, APILoader } from '@uiw/react-baidu-map';

const Demo = () => (
  <div style={{ width: '100%', height: '300px', overflow: 'auto' }}>
    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
      <Map center="杭州"/>
      <Map center="上海">
        {({ BMap, map, container }) => {
          return;
        }}
      </Map>
    </APILoader>
  </div>
);

export default Demo;

容器组件

Package | Bundle size(gzip) | Version/unpkg ----- | ----- | ---- @uiw/react-baidu-map 懒人包 集成所有包,不必安装其它包 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-api-loader 加载 SDK (必须) | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-map 加载地图(容器) | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-with-map | bundle size bundle size(gzip) | npm version Open in unpkg

控件组件

Package | Bundle size(gzip) | Version/unpkg ----- | ----- | ---- @uiw/react-baidu-map-control 自定义 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-copyright-control 版权 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-navigation-control 平移缩放 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-geolocation-control 定位 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-overview-map-control 缩略地图 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-scale-control 比例尺 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-type-control 地图类型 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-panorama-control 全景地图 | bundle size bundle size(gzip) | npm version Open in unpkg

覆盖物

Package | Bundle size(gzip) | Version/unpkg ----- | ----- | ---- @uiw/react-baidu-map-marker 点标注组件 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-info-window 信息窗口 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-label 文本标注 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-point-collection 加载海量点 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-polyline 折线组件 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-polygon 多边形组件 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-circle 圆 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-ground-overlay 地面叠加层 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-canvas-layer 自定义Canvas | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-custom-overlay 自定义覆盖物 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-tile-layer 地图图层 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-require-script 加载第三方包 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-curve-line 弧线组件 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-drawing-manager 鼠标绘制工具 | bundle size bundle size(gzip) | npm version Open in unpkg

其它

Package | Bundle size(gzip) | Version/unpkg ----- | ----- | ---- @uiw/react-baidu-map-types 类型定义 | | npm version Open in unpkg @uiw/react-baidu-map-utils 鼠标绘制工具 | bundle size bundle size(gzip) | npm version Open in unpkg @uiw/react-baidu-map-require-script 鼠标绘制工具 | bundle size bundle size(gzip) | npm version Open in unpkg

开发

npm install -g npm@7

npm install # 安装依赖
npm install --workspaces

npm run build # 编译输出组件 js 文件, .d.ts 类型文件
npm run watch # 监听编译输出 js 文件, .d.ts 类型文件
npm run start # 文档网站运行

相关连接

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.