使用自定义删除按钮从Google地图中删除标记的方法如下:
setMap(null)
方法将其从地图上移除。下面是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
#delete-button {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
background-color: #fff;
padding: 5px;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="delete-button">删除标记</div>
<script>
// 初始化地图
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 40.712776, lng: -74.005974 },
zoom: 12,
});
// 添加标记
var marker = new google.maps.Marker({
position: { lat: 40.712776, lng: -74.005974 },
map: map,
title: "标记1",
id: "marker1", // 标记的唯一标识符
});
// 创建删除按钮的点击事件处理函数
document.getElementById("delete-button").addEventListener("click", function() {
// 获取要删除的标记的标识符
var markerId = "marker1";
// 根据标识符查找标记并将其从地图上移除
var markerToRemove = findMarkerById(markerId);
if (markerToRemove) {
markerToRemove.setMap(null);
}
});
// 根据标识符查找标记
function findMarkerById(id) {
if (marker.id === id) {
return marker;
}
return null;
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
请注意,上述示例代码中的 YOUR_API_KEY
需要替换为你自己的 Google Maps API 密钥。
这个方法可以用于从 Google 地图中删除标记。你可以根据自己的需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云