使用React实现页面跳转至百度地图定位功能详解
在现代Web应用中，地图服务已成为不可或缺的一部分，尤其是对于需要地理位置信息的应用。百度地图作为中国最常用的地图服务之一，提供了丰富的API供开发者使用。本文将详细介绍如何使用React框架实现页面跳转至百度地图定位功能，涵盖从基础配置到具体实现的各个环节。
一、准备工作
获取百度地图API Key
首先，你需要前往百度地图开放平台（
https://lbsyun.baidu.com/）注册账号并创建应用，获取API
Key。这个Key将用于后续的API调用。
创建React项目
如果你还没有一个React项目，可以使用Create React App快速创建一个：
npx create-react-app baidu-map-demo
cd baidu-map-demo
二、引入百度地图API
在项目中引入百度地图API
在
public/index.html
文件的

标签中添加以下代码，引入百度地图API：

三、创建地图组件
创建地图组件
在
src
目录下创建一个名为
BaiduMap.js
的文件，用于封装百度地图的功能：
“`jsx
import React, { useEffect, useRef } from ‘react’;
const BaiduMap = ({ center }) => {
const mapRef = useRef(null);
useEffect(() => {
if (center) {
const map = new BMap.Map(mapRef.current);
const point = new BMap.Point(center.lng, center.lat);
map.centerAndZoom(point, 15);
map.addOverlay(new BMap.Marker(point));
}
}, [center]);
return
;
};
export default BaiduMap;
“`
四、实现页面跳转
创建跳转按钮
在
App.js
中创建一个按钮，点击后跳转到百度地图定位页面：
“`jsx
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch, Link } from ‘react-router-dom’;
import BaiduMap from ‘./BaiduMap’;
const Home = () => (

首页

跳转到地图