Nuxt 插件未添加谷歌地图脚本标签

Question

我的 Nuxt 插件遇到问题，特别是

googleMap.client.ts

插件。该插件的主要目的是在初始页面加载期间为 Google Maps API 添加必要的脚本标记。

但是，在首页加载时，该插件似乎无法正常运行。只有在重新加载页面后，才会添加脚本标签，并且插件才会开始按预期工作。
这是我的插件的代码

export default defineNuxtPlugin((nuxtApp) => {
  let config = useRuntimeConfig();

  if (window.location.origin !== "<my-origin>") {
    config.googleMapKey = config.googleMapDevKey;
  }

  const script = document.createElement("script");
  script.src = `maps.googleapis.com/maps/api/js?key=${config.googleMapKey}&libraries=places,drawing,geometry&callback=initMap`;
  script.async = true;
  script.defer = true;
  document.head.appendChild(script);
});

我认为

useRunTimeConfig

有一些问题。我如何才能使其在初始页面加载时加载并且不必重新加载该页面？

Answer 1

您是否尝试过使用

useHead

可组合项而不是使用纯 JavaScript？

基本示例如下。

注意：私有运行时配置将在客户端返回未定义。要解决这个问题，您需要将 API 密钥移至公开。

~/plugins/map.client.ts

export default defineNuxtPlugin((nuxtApp) => {
    let config = useRuntimeConfig()
    useHead({
        script: [
            {
                src: `https://maps.googleapis.com/maps/api/js?key=${config.public.GOOGLE_MAP_KEY}&libraries=places,drawing,geometry&callback=initMap`,
                async: true,
            }, {
                src: '/scripts/map-init.js',
                async: true
            }
        ]
    })

})

~/public/scripts/map-init.js

let map

function initMap() {
    map = new google.maps.Map( document.getElementById( "map" ), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    } )
}

window.initMap = initMap

您的 API 密钥的保护可以在 Google 云中配置。

预期产出