JS引用高德地图报错: AMap is not defined

起什么昵称呢

已于 2023-02-28 16:27:52 修改

阅读量5.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：编程学习文章标签： css javascript

于 2023-02-24 16:50:53 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45876286/article/details/129203760

编程学习专栏收录该内容

2 篇文章

订阅专栏

在学习WebGIS开发时遇到AMapisnotdefined的错误，通过两种方法解决了问题：1)在实例化AMap对象前添加window；2)将高德地图密钥资源代码移动到body模块中。问题的最新更新显示，网络不稳定也可能导致此类错误，刷新页面可以暂时解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所遇问题

在学习 WebGIS 开发的过程中，从 “基于经纬度绘制点” 章节开始，就出现报错：AMap is not defined。

检查过代码，跟之前 “地图参数” 中的一致，也与老师写的一致，不清楚原因是什么。看文章一中说是因为 没有找到AMap对象 。
经搜索相关问题解决办法，尝试后记录下两个有效的解决办法（对我而言）。

文章参考见引用，感谢网友的分享。

解决办法

方法一

在new 实例化对象AMap前面添加 window。

var marker = new AMap.Marker({}）   //报错

var marker = new window.AMap.Marker({}) //可正常运行

方法二

我没看懂第二篇文章中作者说的, 但是将引入高德密钥资源那一块代码从 head 模块移入 body 模块中，便可解决报错。

<body>
	<script type="text/javascript">
		window._AMapSecurityConfig = {
			securityJsCode: '「您申请的安全密钥」',
		}
	</script>
	<script type="text/javascript"
		src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.Geocoder"></script>
</body>