高德地图api异步加载插件时报错Cannot read properties of undefined (reading 'addListener')

在加载高德地图API异步插件时报错"Cannot read properties of undefined (reading 'addListener')"通常是因为在插件加载完成之前尝试使用插件的方法或属性。为了解决这个问题，你可以使用回调函数或Promise来确保插件加载完成后再使用它们。
下面是两种解决方法：

使用回调函数：

// 异步加载高德地图API
function loadMap(callback) {
  var script = document.createElement('script');
  script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY&plugin=AMap.Geocoder';
  script.onload = callback;
  document.head.appendChild(script);
}

// 在回调函数中使用插件方法
function initMap() {
  var map = new AMap.Map('map-container');
  map.plugin('AMap.Geocoder', function () {
    var geocoder = new AMap.Geocoder();
    // 使用插件方法
    geocoder.addListener('complete', function (result) {
      console.log(result);
    });
  });
}
// 调用加载地图和初始化函数
loadMap(initMap);

2. 使用Promise：

// 异步加载高德地图API
function loadMap() {
return new Promise(function (resolve, reject) {
var script = document.createElement('script');
script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY&plugin=AMap.Geocoder';
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}

// 初始化地图和插件
function initMap() {
var map = new AMap.Map('map-container');
return new Promise(function (resolve, reject) {
map.plugin('AMap.Geocoder', function () {
var geocoder = new AMap.Geocoder();
// 使用插件方法
geocoder.addListener('complete', function (result) {
console.log(result);
resolve();
});
});
});
}

// 调用加载地图和初始化函数
loadMap().then(initMap);
登录后复制