在html中在百度地图中添加气泡的完整代码
时间: 2024-03-26 13:35:43 浏览: 16
以下是在HTML中使用百度地图API添加气泡的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在百度地图中添加气泡</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<style type="text/css">
#map{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("map");
// 创建点坐标
var point = new BMap.Point(116.404, 39.915);
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
// 添加控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
// 创建气泡
var marker = new BMap.Marker(point);
var infoWindow = new BMap.InfoWindow("<p>这是一个气泡</p>");
// 绑定点击事件
marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
});
// 添加气泡到地图上
map.addOverlay(marker);
</script>
</body>
</html>
```
其中,您需要将代码中的“您的密钥”替换为您在百度地图开放平台申请的密钥。另外,您也可以根据需要修改代码中的点坐标、气泡内容等信息。