当前位置：首页 > React

react如何把百度

2026-01-24 23:50:53React

在React中集成百度地图或百度搜索功能，可以通过以下方法实现：

使用百度地图API

百度地图提供JavaScript API，可以在React项目中直接引入。需要先在百度地图开放平台申请API密钥。

import React, { useEffect } from 'react';

const BaiduMap = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://api.map.baidu.com/api?v=3.0&ak=您的AK`;
    script.async = true;
    document.body.appendChild(script);

    script.onload = () => {
      const map = new window.BMap.Map('map-container');
      const point = new window.BMap.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
    };
  }, []);

  return <div id="map-container" style={{ width: '100%', height: '500px' }} />;
};

export default BaiduMap;

集成百度搜索

可以通过iframe或自定义搜索框实现百度搜索功能。百度提供自定义搜索代码，可以直接嵌入React组件。

const BaiduSearch = () => {
  return (
    <div>
      <iframe 
        src="https://www.baidu.com" 
        width="100%" 
        height="600"
        frameBorder="0"
      />
    </div>
  );
};

使用百度智能云服务

百度智能云提供多种API服务，如OCR、语音识别等。可以通过axios等HTTP客户端调用这些服务。

import axios from 'axios';

const callBaiduAPI = async () => {
  try {
    const response = await axios.post(
      'https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic',
      { image: 'base64图像数据' },
      { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
    );
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

注意事项：

react如何把百度