react如何引入高德地图
引入高德地图的基本步骤
在React项目中引入高德地图，需要通过高德地图的JavaScript API。以下是具体实现方式：
安装依赖
确保项目已初始化，若未安装@amap/amap-jsapi-loader，可通过npm或yarn安装：
npm install @amap/amap-jsapi-loader --save
# 或
yarn add @amap/amap-jsapi-loader获取高德地图Key 登录高德开放平台（https://lbs.amap.com/），申请Web端应用的Key。需填写应用名称和安全密钥（如域名白名单）。
组件中加载地图
初始化地图
在React组件中，使用AMapLoader加载高德地图API，并在useEffect中初始化地图：
import React, { useEffect } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';
const MapComponent = () => {
useEffect(() => {
AMapLoader.load({
key: '你的高德Key', // 替换为实际Key
version: '2.0', // 指定API版本
plugins: ['AMap.ToolBar', 'AMap.Scale'] // 按需加载插件
}).then((AMap) => {
const map = new AMap.Map('map-container', {
viewMode: '2D',
zoom: 11,
center: [116.397428, 39.90923] // 默认北京中心点
});
// 添加控件（如工具条）
map.addControl(new AMap.ToolBar());
}).catch(e => console.error(e));
}, []);
return <div id="map-container" style={{ width: '100%', height: '400px' }} />;
};
export default MapComponent;自定义地图样式与标记
添加标记点
通过AMap.Marker类在地图上添加标记：
// 在AMapLoader.then回调中添加
const marker = new AMap.Marker({
position: [116.39, 39.9],
title: '标记点标题'
});
map.add(marker);
// 信息窗口
const infoWindow = new AMap.InfoWindow({
content: '<div>这里是详细信息</div>',
offset: new AMap.Pixel(0, -30)
});
marker.on('click', () => infoWindow.open(map, marker.getPosition()));注意事项
Key安全限制
高德Key需配置域名白名单，本地开发时可使用localhost或127.0.0.1。生产环境需绑定正式域名。
React严格模式
若项目启用严格模式，可能触发多次渲染，建议将地图实例存储在useRef中避免重复初始化：
const mapRef = useRef(null);
useEffect(() => {
if (!mapRef.current) {
AMapLoader.load({...}).then(AMap => {
mapRef.current = new AMap.Map(...);
});
}
}, []);TypeScript支持 若使用TypeScript，可安装类型声明包：
npm install @types/amap-js-api --save-dev通过以上步骤，即可在React项目中完整集成高德地图的基础功能，并扩展标记、事件交互等能力。
