在HTML中插入本地地图标记

翻滚的胖子
2023-06-08 10:47:00
HTML

地图标记可以在网页中增加地图相关的交互性，为用户提供更好的体验。在本文中，我们将介绍如何在HTML中插入本地地图标记。

步骤一：获取地图API Key

首先，我们需要获取地图API Key。在百度地图开放平台上注册一个账号获取Key。获取Key的步骤如下：

AK：您的密钥

其中，AK就是我们需要的Key。

步骤二：引入地图API

接下来，我们需要在HTML文件中引入地图API。在<head>标签中添加以下代码：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

其中，"http://api.map.baidu.com/api?v=2.0&ak=您的密钥"就是地图API的地址，将其中的"您的密钥"替换成我们刚刚获取的Key即可。

步骤三：插入地图标记

完成前两步后，我们就可以在HTML文件中插入地图标记了。在<body>标签中添加以下代码：

<div id="container" style="width:100%;height:500px;"></div>
<script type="text/javascript">
    // 创建地图实例
    var map = new BMap.Map("container");
    // 创建点坐标
    var point = new BMap.Point(116.404, 39.915);
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 15);
    // 添加标注
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
</script>

其中，"container"是地图容器的id，我们可以根据自己的需要设置宽度和高度。BMap是百度地图API的命名空间，我们在脚本中创建了一个地图实例，并指定了中心点坐标和地图级别。最后，我们在地图上添加了一个标注。