调用高德地图api html
时间: 2023-08-10 19:40:28 浏览: 100
要调用高德地图API,可以按照以下步骤进行:
1. 注册高德地图开发者账号,并创建应用,获取应用的key。
2. 在HTML文件中引入高德地图API的JavaScript文件和CSS文件。
```
<!-- 引入高德地图API的JavaScript文件 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_APP_KEY"></script>
<!-- 引入高德地图API的CSS文件 -->
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
```
其中,`YOUR_APP_KEY` 是你创建的应用的key。
3. 在HTML文件中添加一个容器元素,用于显示地图。
```
<div id="mapContainer"></div>
```
4. 在JavaScript中编写代码,创建地图并显示在容器元素中。
```
// 创建地图对象
var map = new AMap.Map('mapContainer', {
center: [116.397428, 39.90923], // 地图中心点坐标
zoom: 13 // 地图缩放级别
});
// 添加地图控件
map.addControl(new AMap.ToolBar());
map.addControl(new AMap.Scale());
```
以上代码会创建一个地图对象,并在地图中心点坐标处显示地图,并添加一个工具栏和一个比例尺。
通过以上步骤,就可以在HTML页面中调用高德地图API并显示地图了。