html接入高德地图
要在HTML中接入高德地图,你可以通过引入高德提供的JavaScript API库来实现。以下是一个简单的示例代码,展示了如何在HTML页面中创建一个基本的地图实例:
- 首先,在HTML文件中引入高德地图的JavaScript API库:
<!DOCTYPE html>
<html>
<head>
<title>高德地图接入示例</title>
<!-- 引入高德地图API JavaScript库 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德API密钥"></script>
</head>
<body>
<div id="container" style="width: 500px; height: 400px;"></div> <!-- 地图容器 -->
<script>
// 地图初始化
var map = new AMap.Map('container', {
zoom: 10, // 地图显示的缩放级别
center: [116.397428, 39.90923] // 地图中心点坐标
});
</script>
</body>
</html>
请将上述代码中的key=您的高德API密钥
替换为你自己的高德地图API Key。你可以在高德地图开放平台官网注册账号并申请API Key。
这段代码创建了一个地图实例,在<div>
元素中显示,其尺寸为宽500像素、高400像素。地图的初始中心点设置为北京天安门的坐标,并将地图的缩放级别设置为10。
评论已关闭