使用vue2-google-maps构建谷歌地图组件时遇属性未定义错误求助

嘿，我看到你在vue2-google-maps组件上遇到了属性未定义的报错，咱们一步步来解决这个问题：

核心问题：拼写错误导致的属性不匹配 #

你遇到的Property or method "longitude" is not defined警告，根源是变量拼写不一致：

• 你的模板里写的是:center="{lat: latitude, lng: longitude}"
• 但你在代码里定义的变量是latitute（注意少了一个字母d，正确拼写是latitude）

Vue无法识别拼写不同的变量，所以才会抛出这个警告。

额外问题：模板中存在无效的闭合标签 #

你的模板代码末尾有多余的</span></v-flex></v-container></div>，这些标签没有对应的起始标签，会破坏组件的DOM结构，可能间接影响渲染，需要清理掉。

完整的修正方案 #

步骤1：确保vue2-google-maps全局配置完成

首先在项目的main.js中初始化插件（这是很多人容易忽略的关键步骤）：

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

Vue.use(VueGoogleMaps, {
  load: {
    key: '你的Google Maps API密钥', // 替换成你自己的API密钥
    libraries: 'places', // 按需添加需要的地图库，比如地点搜索等
  }
})

步骤2：修正后的googleMap.vue组件代码

<template>
  <GmapMap 
    :center="{lat: latitude, lng: longitude}" 
    :zoom="15" 
    map-type-id="terrain" 
    style="width: 500px; height: 300px"
  >
  </GmapMap>
</template>

<script>
import { gmapApi } from 'vue2-google-maps'

export default {
  data() {
    return {
      latitude: 30.08674842, // 修正拼写错误，和模板引用保持一致
      longitude: -97.29304982
    }
  },
  // 使用gmapApi确保地图API加载完成后再渲染
  computed: {
    google: gmapApi
  }
}
</script>

为什么之前的修改没用？ #

你之前把变量放到data里是正确的方向，但因为拼写错误，模板里引用的latitude和data里的latitute是两个完全不同的变量，Vue自然找不到对应的属性。另外多余的无效标签也可能干扰组件的正常渲染，所以即使重启电脑也无法解决。

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