高德地图Web服务API简介

高德地图Web服务API简介

网址:高德开放平台 | 高德地图API (amap.com)

高德地图API最大优势:兼容各种浏览器

在这里插入图片描述

step 01 注册账号并申请key

(申请key能拥有更完整的功能,没有key功能会受限)

进入高德地图官网 ==> 选择web端 ==> 地图js API

按步骤注册开发者账号,然后登陆

在应用管理-我的应用-创建应用-为web添加key

step 02 准备页面

创建好html页面,根据开发文档进行操作

在这里插入图片描述
在这里插入图片描述

step map.html 代码

同步引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=换成自己的key"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 

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

异步引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script>
        window.init=function(){
            var map = new AMap.Map('container');
        }        
    </script>

    <!-- 给key值后面添加回调 -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&callback=init"></script> 

    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 

    
</body>
</html>

动态生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script>
        window.onload=function(){
            new AMap.Map("container");            
        }    

        var ele=document.createElement("script");
        ele.src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a";
        document.head.appendChild(ele);    
    </script>

    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 
    
</body>
</html>

参考文章&&特别鸣谢:高德地图API注册使用教程简答演示 - 陈莺莺呀 - 博客园 (cnblogs.com)

### 高德地图 Web API 的使用方法 高德地图 Web API 是一种用于在网页中集成地图功能的强大工具。它支持多种功能,如地图显示、定位、搜索以及路线规划等[^1]。 #### 初始化地图 要使用高德地图 Web API,在 HTML 文件中可以通过 JavaScript 动态加载 API 脚本。以下是一个简单的示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HighDe Map</title> <script> window.onload = function() { new AMap.Map("container"); }; var ele = document.createElement("script"); ele.src = "https://webapi.amap.com/maps?v=1.4.15&key=your_api_key"; document.head.appendChild(ele); </script> <style> * { margin: 0; padding: 0; } #container { width: 100%; height: 100vh; position: relative; } </style> </head> <body> <div id="container"></div> </body> </html> ``` 在这个例子中,`AMap.Map` 方法被用来创建一个新的地图实例,并将其绑定到 `id="container"` 的 DOM 元素上[^2]。 #### 地图配置参数 当初始化地图时,可以传递一些可选的配置参数给 `AMap.Map` 构造函数。例如设置缩放级别范围和启用调整大小事件监听器: ```javascript _this.mapObj = new AMap.Map('myMap', { zoom: [3, 18], resizeEnable: true }); ``` 这里设置了允许的最大最小缩放比例为 `[3, 18]` 并启用了窗口尺寸变化后的重新渲染逻辑[^3]。 #### 开发资源 为了更好地理解和利用这些特性,建议查阅官方提供的开发者文档和其他辅助材料。这包括但不限于详细的 API 参考手册、教程视频以及社区讨论区等内容[^1]。 #### 注意事项 - **API Key**: 确保使用的 API key 正确无误且未过期。 - **服务条款**: 应严格遵循《高德地图API服务条款》,合理控制请求频率以免影响服务质量。 - **数据更新**: 定期检查是否有最新的地图数据可用,从而保持应用程序中的地理信息最新最准。 ### 结论 综上所述,通过正确引入高德地图 Web API 和适当配置初始参数即可轻松实现基本的地图展示功能;而深入学习其丰富的插件库则能进一步增强用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值