使用vue2-google-maps组件无渲染空白页问题求助（Laravel+Vue.js）

我之前在Laravel + Vue2项目里用vue2-google-maps的时候也碰到过一模一样的问题——组件完全不渲染，页面空白，控制台还没任何报错，当时折腾了好一会儿才找到几个关键原因，你可以按下面的步骤排查试试：

1. 检查Google Maps API密钥的配置是否完整 #

首先，确保你已经在main.js（或者你的Vue入口文件）里正确初始化了vue2-google-maps，并且填入了有效的API密钥，还要确认这个密钥已经在Google Cloud控制台启用了Maps JavaScript API：

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: '你的Google Maps API密钥',
    libraries: 'places', // 如果需要用到其他库可以加，至少确保基础的Maps API启用了
  },
})

如果密钥没配置对或者API没启用，地图是不会加载的，但有时候控制台不会直接报错，只会静默失败。

2. 给地图容器设置明确的高度 #

这是最容易忽略的点！gmap-map组件本身没有默认高度，如果你外层的<div>没有设置高度，地图就会因为没有空间而显示空白。修改你的组件模板，给容器加上高度样式：

<template>
  <div style="height: 500px; width: 100%;"> <!-- 这里加上高度和宽度 -->
    <gmap-map 
      :center="{lat:1.38, lng:103.8}" 
      :zoom="12"
      style="height: 100%; width: 100%;" <!-- 地图组件本身也可以继承容器高度 -->
    >
      <gmap-marker :position="{lat:1.38, lng:103.8}"></gmap-marker>
      <gmap-info-window :position="{lat:1.38, lng:103.8}">
        Hello world!
      </gmap-info-window>
    </gmap-map>
  </div>
</template>

3. 确认依赖版本兼容性 #

确保你安装的vue2-google-maps版本是适配Vue2的，如果你不小心装了适配Vue3的版本（比如@fawmi/vue-google-maps），就会出现这种静默失败的情况。你可以查看package.json里的依赖：

"dependencies": {
  "vue2-google-maps": "^0.10.7" // 这个是Vue2的正确版本
}

如果版本不对，先卸载重装：

npm uninstall vue2-google-maps
npm install vue2-google-maps@^0.10.7 --save

4. 检查Laravel Mix的编译配置 #

如果你的Laravel项目里没有正确配置Mix来处理Vue组件，可能会导致组件没有被正确编译。确保webpack.mix.js里有mix.vue()配置：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .vue() // 确保这一行存在，启用Vue编译
   .sass('resources/sass/app.scss', 'public/css');

然后重新编译资源：

npm run dev

5. 确认组件是否正确注册 #

如果你没有在全局注册vue2-google-maps的组件，也需要在局部组件里注册：

<script>
import { gmapMap, gmapMarker, gmapInfoWindow } from 'vue2-google-maps'

export default {
  components: {
    gmapMap,
    gmapMarker,
    gmapInfoWindow
  }
}
</script>

不过如果你已经在main.js里用Vue.use()全局注册了，这一步就不需要了。

按照上面的步骤排查，大概率能解决问题——我当时就是因为没给容器设高度，折腾了半天😂。

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