高德地图api异步加载插件时报错Cannot read properties of undefined (reading 'addListener')
时间: 2024-01-04 13:20:03 浏览: 164
高德地图API
在加载高德地图API异步插件时报错"Cannot read properties of undefined (reading 'addListener')"通常是因为在插件加载完成之前尝试使用插件的方法或属性。为了解决这个问题,你可以使用回调函数或Promise来确保插件加载完成后再使用它们。
下面是两种解决方法:
1. 使用回调函数:
```javascript
// 异步加载高德地图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:
```javascript
// 异步加载高德地图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);
```
阅读全文