如何在上传图片上绘制四个点？现有单点绘制代码求改造

没问题！你现在的代码只用到了单个标记元素，每次操作都会覆盖它的位置，自然只能显示一个点。要实现四个独立点，咱们只需要创建四个独立的标记元素，再分别控制它们的位置就行，具体方案如下：

步骤1：准备多个独立的标记元素 #

首先在HTML里创建四个带唯一ID的标记元素，初始状态都隐藏：

<!-- 四个独立的标记点，初始隐藏 -->
<img src="null.png" id="marker1" style="position: absolute; display: none;" />
<img src="null.png" id="marker2" style="position: absolute; display: none;" />
<img src="null.png" id="marker3" style="position: absolute; display: none;" />
<img src="null.png" id="marker4" style="position: absolute; display: none;" />

步骤2：编写控制逻辑 #

如果需要点击页面依次放置四个点，可以用下面的JS代码：

// 记录当前要放置的点的序号
let currentMarkerIndex = 1;

// 绑定页面点击事件
$(document).on('click', function(e) {
  // 未放满四个点时继续
  if (currentMarkerIndex <= 4) {
    $(`#marker${currentMarkerIndex}`)
      .css('left', e.pageX)
      .css('top', e.pageY)
      .show();
    // 切换到下一个待放置的点
    currentMarkerIndex++;
  }
});

如果需要手动指定每个点的固定位置，可以直接单独控制每个标记元素：

// 设置第一个点的位置并显示
$('#marker1').css({left: 150, top: 100}).show();
// 设置第二个点的位置并显示
$('#marker2').css({left: 300, top: 200}).show();
// 设置第三个点的位置并显示
$('#marker3').css({left: 450, top: 100}).show();
// 设置第四个点的位置并显示
$('#marker4').css({left: 300, top: 300}).show();

核心思路说明 #

原来的代码只有一个<img>元素，每次修改它的位置都会覆盖之前的状态，所以只能显示一个点。通过创建四个独立的元素，每个元素对应一个点，它们的位置和显示状态互不影响，就能实现四个独立点的绘制啦！

内容的提问来源于stack exchange，提问作者P Lau