Vue3+Nuxt3中@googlemaps/js-api-loader加载冲突错误解决

错误根源 #

你遇到的报错是因为两次独立加载了 Google Maps API：

• 一次是vue3-google-map的<GoogleMap>组件通过:api-key属性自动加载脚本
• 另一次是你通过@googlemaps/js-api-loader的loader.load()手动加载脚本
  两者的加载参数（版本、依赖库等）不一致，导致 Google Maps 检测到重复加载并抛出警告。

解决方案：统一 API 加载方式 #

让vue3-google-map复用你自定义的 Loader 实例，确保整个应用只加载一次 Google Maps API。

1. 修正 useLoader.ts 的参数问题 #

注意 Loader 的配置参数是驼峰命名（apiKey而非api_key），并确保 API_KEY 是字符串类型：

import { Loader } from "@googlemaps/js-api-loader"
const API_KEY = "*********" // 直接用字符串，无需ref

export function useLoader() {
  const loader = new Loader({
    apiKey: API_KEY,
    id: "__googleMapsScriptId",
    version: "weekly",
    libraries: ["drawing", "geometry", "places", "visualization"]
  })
  return {
    loader,
    API_KEY
  }
}

2. 修改 sample.vue 的地图组件配置 #

去掉<GoogleMap>的:api-key属性，改用:loader传入你自定义的 Loader 实例：

<GoogleMap :loader="loader" class="map" ref="mapRef" :center="center" :zoom="zoom">
  <Marker :options="{ position: target_center, icon: targetSvgMarker }" @click="positionChange()" />
  <Marker v-for="(place, index) in fsSurveyData" :options="markerOptions(place)" @click="mobile ? viewDrawer(place, index) : clickMarker(place, index)" />
</GoogleMap>

3. 调整 searchAddress 函数，避免重复加载 #

因为vue3-google-map已经通过 Loader 加载了 API，无需再调用loader.load()，直接使用全局的google对象即可：

async function searchAddress() {
  let place_id: string = "354.68547133314278,539.75279118775010"
  let lat: number = 23.68547133314278
  let lng: number = 39.75279118775010
  
  // 优先使用已加载的全局google对象
  if (window.google) {
    execPlaceSearch(window.google)
  } else {
    //  fallback：确保API加载完成后执行（仅会触发一次）
    loader.load().then(execPlaceSearch)
  }

  function execPlaceSearch(google: any) {
    const map = new google.maps.Map(document.createElement("div"))
    const service = new google.maps.places.PlacesService(map)
    service.textSearch(
      {
        query: target_address,
        language: "ja"
      },
      (result: any, status: any) => {
        if (status == google.maps.places.PlacesServiceStatus.OK && result?.length) {
          place_id = result[0].place_id
          lat = result[0].geometry.location.lat()
          lng = result[0].geometry.location.lng()
          updateLocation(place_id, lat, lng)
        }
      }
    )
  }
}

额外注意事项 #

• 如果是 Nuxt3 环境，可以把useLoader封装成插件全局注入，避免在多个组件中重复创建 Loader 实例
• 确保所有依赖 Google Maps API 的操作，都在地图组件加载完成后执行（比如通过<GoogleMap>的@ready回调）

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