代码拉取完成，页面将自动刷新
基于百度地图JavaScript GL版API封装的React组件库。如果想要使用旧版的2D地图的话，使用react-bmap。如果您对使用地图API完全陌生，建议使用这个库之前先了解百度地图JavaScript GL API，了解一些地图的基本概念，并申请开发者ak。
官方地址：http://huiyan.baidu.com/github/react-bmapgl/
备用地址：https://huiyan-fe.github.io/react-bmapgl/
首先，需要在你的index.html模板页面头部加载百度地图JavaScript API代码，密钥可去百度地图开放平台官网申请
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
然后，使用npm方式安装react组件库，然后通过es模块加载
npm install react-bmapgl --save
import React from 'react';
import ReactDOM from 'react-dom';
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmapgl';
class App extends React.Component {
render() {
return <Map center={{lng: 116.402544, lat: 39.928216}} zoom="11">
<Marker position={{lng: 116.402544, lat: 39.928216}} />
<NavigationControl />
<InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>
</Map>
}
}
ReactDOM.render(<App />, document.getElementById('container'));
map实例如果你在业务中需要操作map对象，需要BMapGL.Map实例的话，可以通过<Map>组件实例的map属性访问到它。
<Map ref={ref => {this.map = ref.map}} />
如果你要开发Map的子组件，想要在子组件中获得map对象，可以直接在<Map>包裹的子组件中调用this.props.map即可。
function App() {
return <Map>
<MapComponent />
</Map>
}
function MapComponent(props) {
console.log(props.map);
}
通常，如果您的业务场景总需要使用到地图，或者需要创建多个地图实例，我们会建议您在index.html模板中加入JSAPI的scirpt标签，因为这种方式对后续开发没有任何限制。
但是在某些业务场景下，可能并不一定会使用到地图，且用到的地图功能、组件也相对简单，我们也提供了MapApiLoaderHOC高阶组件，实现异步加载的方式。
class App extends React.Component {
render() {
return (
<Map
style={{ height: 450 }}
center={new BMapGL.Point(116.404449, 39.914889)}
zoom={12}
/>
)
}
}
export default MapApiLoaderHOC({ak: '您的密钥'})(App)
常用的导入方法会直接把整个包导入进来
import { Map, Marker, MapvglView, MapvglLayer } from 'react-bmapgl'
如果希望引入的包体积小一点，所有组件都支持lodash风格进行按需导入
import Map from 'react-bmapgl/dist/Map'
import Marker from 'react-bmapgl/dist/Overlay/Marker'
React-BMapGL只是利用了React组件的生命周期，来调用对应的百度地图JavaScript API的方法，比如在componentDidMount的时候在地图上添加覆盖物，componentWillUnmount的时候移除覆盖物，componentDidUpdate的时候更新覆盖物，React对应的render渲染函数模块返回的是null。所以这里面地图相关的DOM并不是react渲染的，真正创建地图之类的还是使用百度地图JavaScript API，React-BMapGL只是利用了React组件的写法来封装百度地图JavaScript API，使我们在使用React的时候能更方便的使用百度地图JavaScript API。
本项目开发使用Typescript编写，声明文件为@types/bmapgl，如果需要修改，需要给DefinitelyTyped提PR。如果需要安装声明文件依赖，执行安装命令
npm install @types/bmapgl -D
npm install # 安装依赖
npm start # 开始运行文档网站
npm run build:doc # 文档网站构建编译
npm run build # 组件库编译，输出 js 和 .d.ts 文件
npm publish # 发布新npm包
修改package.json版本号后，直接执行npm publish
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手