WebGIS开发智慧校园（11）测试高德API

原创于 2025-10-15 17:20:02 发布 · 470 阅读

CC 4.0 BY-SA版权

文章标签：

测试高德API

先看测试效果：

在控制台输出AMap对象的相关信息，就证明引⼊通过了。操作步骤：
1）在⾼德API注册并申请Key和密钥。
2）在vscode中新建⼯程，新建html⽂件。
3）输⼊代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial- scale=1.0"> 
<title>我的测试⾼度API</title> 
<script type="text/javascript"> 
window._AMapSecurityConfig = { 
securityJsCode:'您申请的安全密钥', 
        } 
</script> 
<script type="text/javascript" src="https://webapi.amap.com/maps? v=2.0&key=您申请的key值"></script> 
</head> 
<body> 
<script> 
console.log(AMap) 
</script> 
</body> 
</html>

注意这⾥的AMap是对象，如果输⼊：

console.log(‘Amap’)

那控制台只会显示amap，啥也没有。
之后把申请的key和密钥填⼊，即可。
这⾥测试可以加载liveserver来显示，直接⽤浏览器打开也可以。

测试高德API地图容器和显示

1、引入资源文件

![](https://i-blog.csdnimg.cn/img_convert/8a0a79874f1e379d0dfa998082422302.png)具体引⼊资源⽂件请参照前面的介绍。

2. 创建容器

其实就是⽤div就可以，代码如下：

<style> 
#container { 
height: 300px; 
width: 500px; 
  } 
</style>

这⾥测试使⽤auto貌似不⾏

3. 加载地图

使用JS方式来关联div

<script> 
var map = new AMap.Map('container') 
</script>

这个比leaﬂet还是简单的多。

效果图：

总结：

本篇主要介绍测试高德API的一些地图容器和显示的基本操作，下一篇继续介绍测试⾼德API地图参数。