Nuxt3 简单集成 GoogleMap

在Nuxt 3中，要简单地集成Google Maps，你可以使用Google Maps JavaScript API。以下是一个基本的集成示例：

1. 首先，确保你已经在Google Developers Console注册了一个项目，并获取了Google Maps JavaScript API的密钥。
2. 在nuxt.config.ts中配置Google Maps API密钥：

export default defineNuxtConfig({
  // ...
  public: {
    // 添加环境变量配置
    env: {
      GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY,
    },
  },
  // ...
});

3. 在你的组件中使用Google Maps API：

<template>
  <div id="google-map" style="height: 400px; width: 100%"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
 
const googleMap = ref(null);
 
onMounted(() => {
  // 确保环境变量已经加载
  if (process.client && process.env.GOOGLE_MAPS_API_KEY) {
    loadGoogleMaps();
  }
});
 
function loadGoogleMaps() {
  const script = document.createElement('script');
  script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAPS_API_KEY}`;
  script.async = true;
  script.defer = true;
  script.onload = function() {
    googleMap.value = new google.maps.Map(document.getElementById('google-map'), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  };
  document.head.appendChild(script);
}
</script>

在这个例子中，我们创建了一个Vue组件，在组件加载时（onMounted生命周期钩子中），我们检查是否在客户端环境中并且有API密钥，然后动态加载Google Maps API。加载完成后，我们初始化Google Maps，并将其渲染到页面上的<div>元素中。

请确保你的Nuxt 3项目配置了环境变量，并且在合适的环境中使用了正确的Google Maps API密钥。