“ReferenceError: AMap is not defined“

问题

笔者进行web开发,引入高德地图,控制台报错

js 复制代码
"ReferenceError: AMap is not defined"

详细问题

vue.runtime.esm.js:4662 [Vue warn]: Error in mounted hook: "ReferenceError: AMap is not defined"

found in

---> <Map> at src/views/Map.vue
       <ElMain> at packages/main/src/main.vue
         <ElContainer> at packages/container/src/main.vue... (1 recursive calls)
           <Home> at src/views/Manage.vue
             <App> at src/App.vue
               <Root>
vue.runtime.esm.js:3104 ReferenceError: AMap is not defined
    at VueComponent.mounted (cjs.js?!./node_modul...cript&lang=js:28:20)
    at invokeWithErrorHandling (vue.runtime.esm.js:3072:61)
    at callHook$1 (vue.runtime.esm.js:4087:13)
    at Object.insert (vue.runtime.esm.js:4480:13)
    at invokeInsertHook (vue.runtime.esm.js:6999:38)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js:7213:9)
    at Vue._update (vue.runtime.esm.js:3824:25)
    at VueComponent.updateComponent (vue.runtime.esm.js:3930:16)
    at Watcher.get (vue.runtime.esm.js:3501:33)
    at Watcher.run (vue.runtime.esm.js:3577:30)

解决方案

将代码

js 复制代码
this.map = new AMap.Map("container", {
    center: [121.548181, 29.806906],
    zoom: 15,
    resizeEnable: true,
});

修改为

js 复制代码
setTimeout(() = >{
    this.map = new AMap.Map("container", {
        // center: [101.77, 36.62],
        center: [121.548181, 29.806906],
        zoom: 15,
        resizeEnable: true,
    });
},1000);

产生原因

错误信息 "ReferenceError: AMap is not defined" 表明在代码中使用了 AMap 对象,但该对象未被正确定义,导致引用错误。这通常是因为在代码执行时,AMap 对象尚未加载或者未正确引入所致。

异步加载问题: 在 Vue 生命周期的 mounted 钩子中直接初始化 AMap 对象,但是可能由于异步加载的原因,AMap 对象尚未被完全加载进来,导致引用错误。

解决原因

解决方法是在初始化 AMap 对象之前等待一段时间,确保 AMap 对象已经完全加载。这可以通过使用 setTimeout 函数来延迟执行初始化代码。

参考文献

vue项目使用高德地图时报错:AMap is not defined解决办法

产生原因与解释原因部分 部分内容参考chatgpt

原创不易

转载请标明出处

如果对你有所帮助 别忘啦点赞支持哈

相关推荐
小曲曲40 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder7 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。7 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js