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

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

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐