我想解决 @googlemaps/js-api-loader 错误

问：

在 vue3、nuxt3 应用程序中，有一个用于显示和搜索 Google 地图的屏幕。地图根据指定地点的位置信息显示。因此，实施了一项功能，可在按下搜索按钮时在地图上显示指定位置附近的停车场。

单击搜索按钮后，将出现以下错误：

"Google Maps already loaded outside @googlemaps/js-api-loader. This may result in undesirable behavior, as options and script parameters may not match."

如何解决这个问题？

[useLoader.ts]

import { Loader } from "@googlemaps/js-api-loader"
const API_KEY = ref("*********")

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

[示例.vue]

<script setup lang="ts">
  import { GoogleMap, Marker, InfoWindow, CustomControl  } from 'vue3-google-map'

  const { loader } = useLoader()

  const mapView = ref(true)

  // GoogleMap Api
  const API_KEY = "**********"
  const center = ref({ lat: Number(target_lat.value), lng: Number(target_lng.value) })
  const zoom = ref(14)
  const mapRef = ref(null)

  const targetSvgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.9,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
  }


  function markerOptions(value:any) {
    return { position: { lat: Number(value.latitude), lng: Number(value.longitude) } }
  }

  function positionChange(): void {
    center.value = { lat: Number(target_lat.value), lng: Number(target_lng.value) }
  }

  const drawer = ref(false)

  const matchingObject = ref(null)
  const showExpand = ref(false)

  function clickMarker(event:any, index: number) {
    center.value = { lat: Number(event.latitude), lng: Number(event.longitude) }
    const clickObject = data.value.fs_survey.splice(index, 1)[0]
    data.value.fs_survey.unshift(clickObject)
    matchingObject.value = clickObject
    showExpand.value = true
  }

  async function searchAddress() {
    let place_id: string = "354.68547133314278,539.75279118775010"
    let lat: number = 23.68547133314278
    let lng: number = 39.75279118775010
    loader
    .load()
    .then((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) {
            if (result) {
              place_id = result[0].place_id
              lat = result[0].geometry.location.lat()
              lng = result[0].geometry.location.lng()
              updateLocation(place_id, lat, lng)
            }
          }
        }
      )
    })
    .catch((error: any) => {
      console.log(error)
    })
  }


  async function onRefresh() {
    await refresh()
    await contract_list_refresh()
  }
  onRefresh() 

</script>

<template>
  <v-container>
    <v-row>
      <v-col cols="12" class="px-0 pb-1">
        <v-text-field
            v-model="searchText"
            variant="solo-filled"
            single-line
            append-inner-icon="mdi-map-search-outline"
            density="compact"
            rounded="lg"
            color="#6cbca6"
            @click:append-inner="addressSearch()"
            hide-details
        ></v-text-field>
    </v-col>
      <v-col lg="6" cols="12" class="px-0 pb-1 pt-0">
        <v-card v-if="!mobile || mapView" flat :height="height - 250" class="pa-0">
          <GoogleMap :api-key="API_KEY" 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>
        </v-card>
      </v-col>
    </v-row>
</template>
<style scoped>
.on-hover {
  cursor: pointer;
  color: #6cbca6
}
.v-table tr:hover {
    background-color: #6cbca70f;
}

.form-date-time{
  text-align:left;
  width: 120px;
  border: 1px solid grey;
}

.map {
    position: relative;
    /* width: 100%; */
    height: 100%;
}
</style>

一些用 sample.vue 编写的代码已移至 [useLoader.ts]。

[useLoader.ts]

import { Loader } from "@googlemaps/js-api-loader"
const API_KEY = ref("*********")

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