如何判断Google Maps Marker库是否加载及避免重复加载？

如何判断Marker类库是否已加载 #

要确认Marker类库是否加载完成，直接检查AdvancedMarkerElement的存在性即可：

// 检查AdvancedMarkerElement是否已被定义
const isMarkerLibLoaded = typeof google.maps?.AdvancedMarkerElement !== 'undefined';

原理很简单：当importLibrary("marker")加载完成后，AdvancedMarkerElement会挂载到google.maps对象下，通过类型判断就能快速确认库的加载状态。

重复调用importLibrary会发起冗余请求吗？ #

不会。Google Maps的importLibrary内部自带缓存机制，第一次调用会发起网络请求加载库，后续再调用同一方法，会直接返回已加载好的模块Promise，不会重复发送HTTP请求。

怎么避免冗余操作？ #

虽然不会重复发请求，但多次调用importLibrary还是会触发Promise的处理流程，建议用以下方式优化：

1. 模块级缓存加载结果 #

在组件所在的模块里定义一个缓存变量，把加载Promise存起来，后续直接复用：

// 模块内缓存加载Promise，仅初始化一次
let markerLibPromise;

async function getMarkerLibrary() {
  if (!markerLibPromise) {
    markerLibPromise = google.maps.importLibrary("marker") as Promise<google.maps.MarkerLibrary>;
  }
  return markerLibPromise;
}

// 组件内使用时
const { AdvancedMarkerElement } = await getMarkerLibrary();

2. 组件生命周期内仅加载一次 #

如果是框架组件（比如React/Vue），可以在组件初始化的生命周期钩子中加载一次，把结果存到状态里，后续直接使用：

// React组件示例
import { useEffect, useState } from 'react';

function MapComponent() {
  const [AdvancedMarker, setAdvancedMarker] = useState(null);

  useEffect(() => {
    async function loadMarkerLib() {
      const lib = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
      setAdvancedMarker(lib.AdvancedMarkerElement);
    }
    loadMarkerLib();
  }, []); // 空依赖数组确保只执行一次

  // 有了AdvancedMarker后再渲染标记
  return <div>{AdvancedMarker && /* 在这里使用AdvancedMarkerElement */}</div>;
}

内容的提问来源于stack exchange，提问作者chuckd