react开发中使用百度地图rc-bmap

    百度地图作为一个开放的免费工具，自然会被使用在很多需要地图展示的项目中，而react项目是目前前端开发相对比较火的框架，自然会有结合百度地图的场景的需要，而真有这么一个在react项目中使用的百度地图框架rc-bmap，我们只需要在react项目中通过npm install rc-bmap --save安装即可使用。

    我们给出一个简单的示例：

    首先：创建react项目：create-react-app xxx

    其次：进入项目目录，安装依赖 npm install rc-bmap --save

    编写一个控件，只展示地图。App.js

import React from 'react'
import {Map,Base} from 'rc-bmap'
const App = ()=>{
	const {Point} = Base
	return (
		<Map ak="YcP5EukTHUoFR3oObxdfBHTfA3EUgHET" zoom={15}>
			<Point name="center" lng="116.404" lat="39.915" />
		</Map>
	)
}

export default App

     react项目入口index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import "./index.css"
ReactDOM.render(
<App />
,document.getElementById('root'))

    启动react项目：npm start

     

    需要注意的是，我们的地图外层是一个id=root的div元素，我们需要设置#root样式的高度为100%(#root{height:100%})，否则页面启动不会报错，但是看不见地图。因为默认div高度是0。 

    rc-bmap把地图使用的api都帮助我们封装好了，不需要我们再去重复编写控件。关于rc-bmap的在线文档在这里：http://jser.wang/bmap/