在html在百度地图中对留言进行添加删除操作
时间: 2024-03-26 15:35:44 浏览: 12
以下是在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;
}
#msg-form{
position: absolute;
top: 10px;
left: 10px;
background-color: #fff;
padding: 10px;
z-index: 1000;
}
.msg-item{
margin-bottom: 10px;
padding: 10px;
background-color: #fff;
}
.msg-item h4{
margin: 0;
}
.msg-item p{
margin: 0;
}
.msg-item button{
background-color: #f00;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="map"></div>
<form id="msg-form">
<h3>添加留言</h3>
<p>
<label>标题:</label>
<input type="text" id="msg-title" required>
</p>
<p>
<label>内容:</label>
<textarea id="msg-content" rows="5" required></textarea>
</p>
<button type="submit">提交</button>
</form>
<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 msgArr = [];
// 添加留言
function addMessage(title, content, point){
// 创建气泡
var marker = new BMap.Marker(point);
var infoWindow = new BMap.InfoWindow("<div class='msg-item'><h4>"+title+"</h4><p>"+content+"</p><button class='del-btn'>删除</button></div>");
// 绑定点击事件
marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
});
// 添加气泡到地图上
map.addOverlay(marker);
// 添加留言到数组中
msgArr.push({title: title, content: content, point: point, marker: marker, infoWindow: infoWindow});
}
// 删除留言
function deleteMessage(index){
// 从地图上移除气泡
map.removeOverlay(msgArr[index].marker);
// 从数组中移除留言
msgArr.splice(index, 1);
}
// 绑定表单提交事件
document.getElementById("msg-form").addEventListener("submit", function(event){
event.preventDefault();
var title = document.getElementById("msg-title").value;
var content = document.getElementById("msg-content").value;
var point = new BMap.Point(map.getCenter().lng, map.getCenter().lat);
addMessage(title, content, point);
document.getElementById("msg-form").reset();
});
// 绑定删除按钮点击事件
document.getElementById("map").addEventListener("click", function(event){
if(event.target.classList.contains("del-btn")){
var index = Array.prototype.indexOf.call(event.target.parentNode.parentNode.children, event.target.parentNode);
deleteMessage(index);
}
});
</script>
</body>
</html>
```
同样地,您需要将代码中的“您的密钥”替换为您在百度地图开放平台申请的密钥。在表单中输入留言的标题和内容后,点击提交按钮即可在地图上添加留言。在留言气泡中的“删除”按钮上点击,即可删除相应的留言。