如何根据单击的按钮在传单上添加/删除标记？

<button id="addButton">添加标记</button>
<button id="deleteButton">删除标记</button>

<script>
  document.getElementById("addButton").addEventListener("click", addMarker);
  document.getElementById("deleteButton").addEventListener("click", deleteMarker);

  function addMarker() {
    // 在传单上添加标记的逻辑代码
  }

  function deleteMarker() {
    // 在传单上删除标记的逻辑代码
  }
</script>

<canvas id="leafletCanvas" width="500" height="500"></canvas>

<script>
  var canvas = document.getElementById("leafletCanvas");
  var ctx = canvas.getContext("2d");

  var markers = []; // 存储标记的数组

  function addMarker() {
    // 在传单上添加标记的逻辑代码
    var marker = {
      x: 100, // 标记的横坐标
      y: 100, // 标记的纵坐标
      color: "red" // 标记的颜色
    };
    markers.push(marker);
    drawMarkers();
  }

  function deleteMarker() {
    // 在传单上删除标记的逻辑代码
    markers.pop();
    drawMarkers();
  }

  function drawMarkers() {
    // 绘制传单和标记的逻辑代码
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
    // 绘制传单的代码...
    // 绘制标记的代码...
    for (var i = 0; i < markers.length; i++) {
      var marker = markers[i];
      ctx.fillStyle = marker.color;
      ctx.beginPath();
      ctx.arc(marker.x, marker.y, 10, 0, 2 * Math.PI);
      ctx.fill();
    }
  }
</script>