项目作者: ivan-94

项目描述 :
Baidu Map Components for React. React百度地图组件库
高级语言: TypeScript
项目地址: git://github.com/ivan-94/react-bdmap.git
创建时间: 2018-11-21T08:13:55Z
项目社区:https://github.com/ivan-94/react-bdmap

开源协议:MIT License

下载





Baidu Map Components for React

React Baidu Map

npm
npm
license
circleCI

react-bdmap 是基于 React 封装的百度地图组件库. 以 React 组件化的思维来, 声明式地开发地图应用. 除了内置组件,
react-bdmap 也封装了一些易用的组件帮助实现自定义地图组件. 欢迎交流或贡献代码

Requirement

‘react & react-dom’ > 16.6

安装

  1. npm install react-bdmap --save
  2. # by yarn
  3. yarn add react-bdmap


基本使用

```jsx static
import React from ‘react’
import ReactDOM from ‘react-dom’
import {
BDMapLoader,
BDMap,
GeolocationControl,
MapTypeControl,
Marker,
CustomOverlay,
TrafficLayer
} from ‘react-bdmap’

/**

  • 地图渲染, BDMapLoader会在依赖加载完成后才会渲染子级, 所以在这个组件的’实例方法’中可以
  • 安全地方法百度地图SDK 的 BMap全局变量.
    /
    class MyMap extends React.Components {
    state = {
    defaultCenter: new BMap.Point(116.402544, 39.928216})
    }
    render() {
    return (
    {/
    控件 /}


    {/
    覆盖物 */ }

    1. <div style={{color: 'red'}}>hello world</div>

    {/ 图层 /}

    )
    }
    }

/**

  • 初始化百度地图, 使用script标签导入百度地图依赖
    */
    function App(props) {
    return (
    (err ? ‘加载失败’ : ‘加载中…’)}
    >


    )
    }

ReactDOM.render(, document.getElementById(‘root’))

  1. <br/>
  2. ### 按需导入
  3. 所有组件都支持按照`lodash`的风格进行导入. 例如:
  4. ```jsx static
  5. import BDMap from 'react-bdmap/BDMap'
  6. import CustomOverlay from 'react-bdmap/overlays/CustomOverlay'

详细模块结构:

  1. react-bdmap
  2. ├── index.js
  3. ├── BDMapLoader # 地图加载器
  4. ├── BDMap # 地图实例
  5. ├── ContextMenu # 右键菜单
  6. ├── controls # 控件
  7. ├── Control
  8. ├── CopyrightControl
  9. ├── CustomControl
  10. ├── GeolocationControl
  11. ├── MapTypeControl
  12. ├── NavigationControl
  13. ├── OverviewMapControl
  14. └── ScaleControl
  15. ├── overlays # 覆盖物
  16. ├── CanvasLayer
  17. ├── Circle
  18. ├── CustomOverlay
  19. ├── GroundOverlay
  20. ├── InfoWindow
  21. ├── Label
  22. ├── Marker
  23. ├── Overlay
  24. ├── PointCollection
  25. ├── Polygon
  26. └── Polyline
  27. ├── tileLayers # 图层
  28. ├── CustomLayer
  29. ├── CustomTileLayer
  30. ├── TileLayer
  31. └── TrafficLayer
  32. └── withMap # 高阶组件, 注入BMap.Map实例


文档

https://ivan-94.github.io/react-bdmap/


Typescript 支持

react-bdmap使用 Typescript 编写, npm 包中已经包含了声明文件. 另外需要安装百度地图 sdk 声明文件

  1. yarn add @types/baidumap-web-sdk @types/react @types/react-dom -D


License

MIT

Copyright (c) 2018-present