如何在Nuxt.js中使用Google Map API？现有调用代码无返回结果

安全阿岳

2026-10-5

问题根因

你请求的https://maps.googleapis.com/maps/api/js是谷歌地图JS SDK的加载地址，返回的是可执行JavaScript脚本，而非JSON格式接口数据，你配置的Accept: "application/json"请求头不符合该资源的类型要求
地址携带的callback=initMap为JSONP回调参数，axios原生不支持JSONP类型请求，自然无法获取符合预期的返回结果
谷歌地图JS SDK的加载逻辑本身就不应该通过AJAX请求实现，该调用方式不符合SDK的加载规范

解决方案

方案1：全局配置加载

在项目根目录的nuxt.config.js中配置head的script字段，全局引入SDK：

export default {
  head: {
    script: [
      {
        src: 'https://maps.googleapis.com/maps/api/js?key=替换为你的有效API_KEY',
        async: true,
        defer: true
      }
    ]
  }
}

加载完成后可以直接从window.google对象调用地图相关能力。

方案2：组件内动态加载（按需引入）

如果仅在单个组件使用地图，可在组件内动态创建script标签加载，避免全局加载占用资源：

async created() {
  // 避免重复加载SDK
  if (window.google?.maps) {
    this.initMap()
    return
  }
  // 挂载全局回调函数
  window.initMap = this.initMap
  // 创建script标签加载SDK
  const script = document.createElement('script')
  script.src = 'https://maps.googleapis.com/maps/api/js?key=替换为你的有效API_KEY&callback=initMap'
  script.async = true
  script.defer = true
  document.head.appendChild(script)
},
methods: {
  initMap() {
    // 在此处编写地图初始化逻辑
    const map = new window.google.maps.Map(document.getElementById('map-container'), {
      center: { lat: 39.9042, lng: 116.4074 },
      zoom: 12
    })
  }
}