react如何把百度
在React中集成百度地图
要在React项目中集成百度地图，可以使用百度地图的JavaScript API。以下是一个基本的实现方法：
安装百度地图API脚本
在public/index.html文件中添加百度地图的JavaScript脚本引用：
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>创建地图组件
创建一个独立的React组件来显示地图：
import React, { useEffect } from 'react';
const BaiduMap = () => {
useEffect(() => {
const map = new window.BMap.Map("container"); // 创建地图实例
const point = new window.BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(); // 启用滚轮缩放
}, []);
return <div id="container" style={{ width: '100%', height: '500px' }} />;
};
export default BaiduMap;添加地图控件
可以为地图添加控件如缩放按钮、比例尺等：
useEffect(() => {
const map = new window.BMap.Map("container");
const point = new window.BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 添加缩放控件
map.addControl(new window.BMap.NavigationControl());
// 添加比例尺控件
map.addControl(new window.BMap.ScaleControl());
}, []);添加标记和信息窗口
在地图上添加标记和信息窗口：
useEffect(() => {
const map = new window.BMap.Map("container");
const point = new window.BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 创建标记
const marker = new window.BMap.Marker(point);
map.addOverlay(marker);
// 创建信息窗口
const infoWindow = new window.BMap.InfoWindow("这里是北京天安门");
marker.addEventListener("click", () => {
map.openInfoWindow(infoWindow, point);
});
}, []);注意事项
确保替换脚本中的ak=您的密钥为实际申请的百度地图API密钥。密钥可以在百度地图开放平台申请获得。
地图容器需要指定明确的宽度和高度，否则地图可能无法正常显示。
如果遇到类型错误，可以声明BMap类型：
declare global {
interface Window {
BMap: any;
}
}
