HTML 接入高德地图

要在 HTML 页面中接入高德地图，可以按照以下步骤：

1. 在高德开放平台上申请 API Key，获取开发者密钥。

2. 引入高德地图 JavaScript API，代码如下：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的API Key"></script>

在这里，v参数指定了使用的 API 版本，key参数则是上一步中获取的 API Key。

3. 创建地图容器，代码如下：

<div id="mapContainer" style="width: 100%; height: 500px;"></div>

这里的id属性值为“mapContainer”，可以根据实际需求修改。

4. 在 JavaScript 中创建地图对象，代码如下：

var map = new AMap.Map('mapContainer', {
    zoom: 10, // 地图级别
    center: [116.397428, 39.90923] // 地图中心点坐标
});

在这里，AMap.Map()函数的第一个参数是地图容器的id，第二个参数是一个配置对象，可以设置地图级别、中心点坐标等属性。

5. 添加地图控件，代码如下：

map.addControl(new AMap.ToolBar());

这里添加了一个工具条控件，可以根据实际需求添加其他控件。

6. 在地图上添加标记，代码如下：

var marker = new AMap.Marker({
    position: [116.397428, 39.90923], // 标记的位置
    map: map // 所属的地图对象
});

这里创建了一个标记对象，并设置了标记的位置和所属的地图对象。

7. 在地图上添加信息窗体，代码如下：

var infoWindow = new AMap.InfoWindow({
    content: '<p>这是一个信息窗体</p>', // 信息窗体的内容
    offset: new AMap.Pixel(0, -30) // 信息窗体的偏移量
});
marker.on('click', function() {
    infoWindow.open(map, marker.getPosition()); // 打开信息窗体
});

这里创建了一个信息窗体对象，并在标记对象的点击事件中打开信息窗体。

通过以上步骤，就可以在 HTML 页面中添加高德地图了。当然，还有很多其他的功能可以使用，例如路线规划、POI搜索等等，可以根据实际需求进行开发。