WebGIS开发【智慧校园】实战案例：11. 测试高德API

最新推荐文章于 2024-10-02 10:08:18 发布

WebGIS开发

最新推荐文章于 2024-10-02 10:08:18 发布

阅读量323

点赞数 10

分类专栏： GIS开发文章标签： arcgis javascript html5 学习

本文链接：https://blog.csdn.net/2301_78220461/article/details/141896563

版权

GIS开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

测试高德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、引入资源文件

具体引⼊资源⽂件请参照前面的介绍。

2. 创建容器

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

<div id="comtainer"></div>

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

这⾥测试使⽤auto貌似不⾏

3. 加载地图

使用JS方式来关联div

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

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

效果图：

总结：

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

WebGIS开发

关注

10
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录