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

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

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