react 怎么接百度地图api

### 在 React 中集成百度地图 API 的方法 在 React 项目中集成百度地图 API，需要完成以下核心步骤：引入百度地图的 JavaScript 文件、申请密钥（AK）、初始化地图实例，并根据需求进行功能扩展。 #### 1. 引入百度地图 API 脚本 首先，在 `public/index.html` 文件中引入百度地图的 JavaScript 文件。确保替换其中的 `ak` 参数为你的实际密钥[^2]。 ```html <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script> ``` 此脚本将加载百度地图的核心库，支持后续的地图操作。 #### 2. 创建地图容器 在 React 组件中创建一个用于展示地图的 DOM 容器。例如： ```jsx <div id="map-container" style={{ width: "100%", height: "400px" }}></div> ``` 此容器的宽高可以通过内联样式或外部 CSS 文件定义，确保其具有足够的尺寸以正常显示地图。 #### 3. 初始化地图实例 在组件的生命周期方法（如 `componentDidMount` 或 `useEffect`）中初始化地图实例。以下是基于函数式组件和 `useEffect` 的实现示例[^5]： ```javascript import React, { useEffect } from 'react'; export default function BaiduMap() { useEffect(() => { if (window.BMapGL) { // 创建地图实例 const map = new window.BMapGL.Map('map-container'); // 设置地图中心点和缩放级别 const point = new window.BMapGL.Point(116.404, 39.915); // 北京市经纬度 map.centerAndZoom(point, 11); // 添加控件（可选） map.addControl(new window.BMapGL.NavigationControl()); map.addControl(new window.BMapGL.ScaleControl()); map.addControl(new window.BMapGL.CityListControl()); map.addControl(new window.BMapGL.ZoomControl()); // 添加标记（可选） const marker = new window.BMapGL.Marker(point); map.addOverlay(marker); } }, []); return ( <div> <div id="map-container" style={{ width: "100%", height: "400px" }}></div> </div> ); } ``` #### 4. 样式调整 确保地图容器的高度和宽度设置正确，否则地图可能无法正常显示。如果使用外部 CSS 文件，可以定义如下样式[^4]： ```css #map-container { width: 100%; height: 400px; } ``` #### 5. 功能扩展 根据具体需求，可以进一步扩展地图功能，例如： - 获取用户当前位置并标记[^2]。 - 实现路径规划功能。 - 添加自定义图层或覆盖物。 --- ### 注意事项 - 确保在开发者平台申请的 AK 密钥已正确配置白名单。如果暂时不确定白名单范围，可以先设置为 `*`[^3]。 - 百度地图的 API 版本可能会影响功能实现，请根据官方文档选择合适的版本[^1]。 - 如果使用 ESLint 工具，全局对象需通过 `window` 访问以避免报错[^4]。 ---