react实现百度地图
时间: 2023-07-07 08:39:00 浏览: 207
要在 React 中使用百度地图,可以使用第三方库 react-bmapgl。这个库提供了一个 BMapGL 组件,可以用来显示地图。
首先,需要在项目中安装 react-bmapgl:
```
npm install react-bmapgl --save
```
接着,在需要显示地图的组件中,导入 BMapGL 组件,并在 render 方法中使用它:
```jsx
import React from 'react';
import { BMapGL } from 'react-bmapgl';
class Map extends React.Component {
render() {
return (
<BMapGL
center={{lng: 116.404, lat: 39.915}}
zoom={15}
apiKey="这里填写你的百度地图 API Key"
/>
);
}
}
```
在这个例子中,我们创建了一个 Map 组件,使用 BMapGL 组件在页面上显示地图。BMapGL 组件接受三个参数:
- center:地图的中心点坐标。
- zoom:地图的缩放级别。
- apiKey:百度地图的 API Key。
可以根据需要修改这些参数来适应不同的场景。
需要注意的是,使用 react-bmapgl 库需要在 HTML 文件中引入百度地图的 JS 文件。可以在 public/index.html 文件中添加以下代码:
```html
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=这里填写你的百度地图 API Key"></script>
```
其中,ak 参数填写自己的百度地图 API Key。