我之前在项目里也踩过这个坑，这个错误大概率是高德地图核心API没正确加载，或者vue-amap的初始化方式不对导致的。下面给你一步步排查和解决的方案：

第一步：检查vue-amap的初始化是否正确 #

首先确保你已经完成了vue-amap的安装和全局初始化：

1. 确认依赖安装：

npm install vue-amap --save

2. 在main.js里正确初始化，重点是提前声明需要用到的插件：

import VueAMap from 'vue-amap'
import Vue from 'vue'

Vue.use(VueAMap)

// 初始化高德地图API加载器
VueAMap.initAMapApiLoader({
  key: '你的高德地图开发者密钥', // 替换成你自己的key
  plugin: ['AMap.Geocoder'], // 必须提前声明你要用到的Geocoder插件
  v: '1.4.15' // 指定稳定版本，避免版本兼容问题
})

这里一定要把AMap.Geocoder加入到plugin数组里，不然高德地图不会预加载这个服务，调用AMap.service时就会报错。

第二步：修复组件内的调用问题 #

你的组件代码里还有两个需要调整的地方：

1. 确保AMap是已加载完成的全局实例，建议直接用window.AMap来访问（避免vue-amap封装的异步加载问题）；
2. 回调函数里的this指向错误——在AMap.service的回调里，this不再是Vue组件实例，直接赋值this.address会失败。

修改后的getAddre方法：

methods:{
  getAddre(lnglatXY){
    // 提前保存组件实例的this，避免回调里指向丢失
    const vm = this
    // 用window.AMap确保获取到正确的高德地图全局实例
    window.AMap.service('AMap.Geocoder', function() {
      const geocoder = new window.AMap.Geocoder({})
      geocoder.getAddress(lnglatXY, function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          vm.address = result.regeocode.formattedAddress
          alert(vm.address)
        } else {
          alert('获取地址失败')
        }
      })
    })
  }
}

其他可能的排查方向 #

如果你是直接通过CDN引入高德地图而不是用vue-amap，那要确保CDN脚本在组件渲染前已经加载完成：
在index.html里引入：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的密钥&plugin=AMap.Geocoder"></script>

这种情况下，组件里直接用window.AMap即可，不需要vue-amap的封装。

总结一下常见原因 #

• 未在vue-amap初始化时声明需要的插件；
• 高德地图API还未加载完成就调用了AMap.service；
• 回调函数内this指向错误（虽然不是当前报错的原因，但会导致后续赋值失败）。

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