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

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

下面是两种解决方法：

1. 使用回调函数：

// 异步加载高德地图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);