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

原创已于 2022-04-28 14:42:24 修改 · 5.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #前端

于 2022-04-28 14:40:35 首次发布

本文讲述了如何在子页面正确引用高德地图API并解决'AMap is not defined'错误，强调了将关键脚本放置在父页面的重要性，确保安全配置和API key的正确使用。

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

我在页面里引用了高德地图的根据输入地点获取经纬度插件，代码如下：

<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>
<script type="text/javascript">
	var geocoder = new AMap.Geocoder();
	geocoder.getLocation(
		"北京市朝阳区阜荣街10号",
		function(status, result) {
			console.log(status, result);
			if (status === "complete" && result.geocodes.length) {
				var lnglat = result.geocodes[0].location;
				console.log(lnglat);
			} else {
				console.log("根据地址查询位置失败");
			}
		}
	);
</script>

问题描述

网上查了下问题解决，发现不管是写在body里还是body外面，又或者与其他引用，比如JQuery的顺序先后调整，都是报AMap is not defined这个错。后来经排查发现，我这个页面是属于父子页面中的子页面，引用需要加在父页面中，子页面才能正常使用。

解决方法

将下面这两段js引用放入父页面中，即可使用。

注：需要有申请的KEY值和安全密钥才能使用高德相关功能，光页面引用是无法生效的。

<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>