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/

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/feinifi/article/details/104026134
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-08 15:13:48
阅读 ( 1927 )
分类：职场

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

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看