当前位置：首页 > React

如何在react中嵌入高德地图

2026-01-26 05:22:56React

安装高德地图 JavaScript API

在项目中引入高德地图的 JavaScript API。可以通过在 public/index.html 中添加脚本标签实现：

<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图Key"></script>

将 你的高德地图Key 替换为从高德地图开发者平台申请的密钥。

创建地图组件

新建一个 React 组件用于承载地图。使用 useEffect 确保 DOM 加载完成后初始化地图：

如何在react中嵌入高德地图

import React, { useEffect } from 'react';

const MapComponent = () => {
  useEffect(() => {
    const map = new AMap.Map('map-container', {
      viewMode: '2D',
      zoom: 11,
      center: [116.397428, 39.90923] // 默认北京中心点
    });
    return () => map.destroy(); // 组件卸载时销毁地图
  }, []);

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

添加地图控件

通过 AMap.plugin 动态加载插件，例如添加缩放控件和工具条：

useEffect(() => {
  const map = new AMap.Map('map-container', { /* 配置 */ });

  AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
    map.addControl(new AMap.ToolBar());
    map.addControl(new AMap.Scale());
  });
}, []);

绘制标记点

使用 AMap.Marker 在地图上添加标记，并绑定事件：

如何在react中嵌入高德地图

useEffect(() => {
  const marker = new AMap.Marker({
    position: [116.39, 39.9],
    title: '标记点'
  });
  marker.setMap(map);

  marker.on('click', () => {
    alert('点击了标记');
  });
}, []);

响应式地图容器

通过监听窗口大小变化调整地图尺寸：

useEffect(() => {
  const handleResize = () => {
    map && map.setFitView();
  };
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, [map]);

自定义信息窗口

创建信息窗口并关联到标记点：

const infoWindow = new AMap.InfoWindow({
  content: '<div style="padding:5px;">自定义内容</div>',
  offset: new AMap.Pixel(0, -30)
});

marker.on('click', () => {
  infoWindow.open(map, marker.getPosition());
});