React 高德地图实战指南：动态路线绘制、交互控件与深色模式切换

地图的基本展示

首先实现地图的基本展示

组件定义与状态初始化

  const mapContainerRef = useRef<HTMLDivElement>(null);
  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);

• mapContainerRef: 使用useRef创建一个引用，指向地图容器的DOM元素。
• isDarkMode: 使用useState创建一个状态变量，用于跟踪当前是否处于深色模式。

初始化地图函数

const initMap = () => {
   
   
  if (mapContainerRef.current) {
   
   
    const map = new window.AMap.Map(mapContainerRef.current, {
   
   
      zoom: 5,
      center: [110, 35],
      mapStyle: isDarkMode ? "amap://styles/dark" : "",
    });
    map.setFitView();
  }
};

• initMap函数负责初始化地图实例：

  • 检查mapContainerRef.current是否存在以确保DOM元素已经挂载。
  • 创建一个新的地图实例，设置缩放级别、中心点以及根据isDarkMode状态选择地图样式。
  • 调用map.setFitView()方法调整地图视图以适应所有覆盖物（在这个例子中没有具体添加覆盖物）。

使用useEffect处理副作用

useEffect(() => {
   
   
  window._AMapSecurityConfig = {
   
   
    securityJsCode: "api",
  };

  const script = document.createElement("script");
  script.src = "https://webapi.amap.com/maps?v=1.4.15&key=api";
  script.async = true;

  document.body.appendChild(script);

  script.onload = initMap;

  return () => {
   
   
    document.body.removeChild(script);
  };
}, [isDarkMode]);

• 在组件挂载时执行以下操作：

  • 配置高德地图的安全密钥。
  • 动态创建并插入一个<script>标签来加载高德地图的JS API。
  • 设置脚本加载完成后调用initMap函数来初始化地图。
  • 返回一个清理函数，在组件卸载时移除之前插入的脚本标签，防止内存泄漏。

• [isDarkMode]作为依赖数组，意味着每当isDarkMode状态改变时，都会重新执行useEffect中的逻辑，从而更新地图样式。

渲染组件

return (
  <div className="box">
    <h2>重庆到成都的路线</h2>
    <button onClick={
   
   () => setIsDarkMode(!isDarkMode)}>
      {
   
   isDarkMode ? "切换到浅色模式" : "切换到深色模式"}
    </button>
    <div ref={
   
   mapContainerRef} style={
   
   {
   
    width: "100%", height: "500px" }}></div>
  </div>
);

• 显示标题“重庆到成都的路线”。
• 提供一个按钮，点击可以切换浅色模式和深色模式。

注意：切换浅色模式和深色模式功能，要配置安全密钥、替换为你的 API Key后才会生效

• 使用ref属性将mapContainerRef绑定到一个div元素上，这个div作为地图的容器，并设置了宽度和高度。

注意：div 一定要设置宽度和高度才能看到

完整代码：

import React, {
   
    useEffect, useRef, useState } from "react";

const DataPage = () => {
   
   
  // 使用 useRef 来获取容器元素
  const mapContainerRef = useRef<HTMLDivElement>(null);
  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);

  // 初始化地图
  const initMap = () => {
   
   
    if (mapContainerRef.current) {
   
   
      // 初始化地图实例
      const map = new window.AMap.Map(mapContainerRef.current, {
   
   
        zoom: 5, // 缩放级别调整为适合显示两地的距离
        center: [110, 35], // 中心点设置为一个中间位置，以便同时看到两个位置
        mapStyle: isDarkMode ? "amap://styles/dark" : "", // 根据是否是深色模式选择地图样式
      });

      // 缩放到包含整个折线的视图
      map.setFitView();
    }
  };

  useEffect(() => {
   
   
    // 设置代理服务器地址
    window._AMapSecurityConfig = {
   
   
      securityJsCode: "api", // 配置安全密钥
    };

    // 创建并插入地图 JSAPI 脚本
    const script = document.createElement("script");
    script.src = "https://webapi.amap.com/maps?v=1.4.15&key=api"; // 替换为你的 API Key
    script.async = true;

    // 将脚本插入到 body 中
    document.body.appendChild(script);

    // 初始化地图
    script.onload = initMap;

    // 清理函数，在组件卸载时移除脚本标签