使用html画布和javascript将点击添加到全局PIN

我试图在codepen上为这个旋转地球仪添加一些功能：

我想有一个模式，弹出详细信息时，你点击一个pin

此函数用于绘制销头：

const drawMapPushPin = (ctx, pos, color) => {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(pos.x, pos.y, 20, 0, 2 * Math.PI);
ctx.fill();
}

---

我不知道如何在这里添加eventlisteners。。。如何允许单击此图钉并加载模式div？

您可以执行以下操作：

const onClick = (event) => {
let offset = 50,
  rect = event.target.getBoundingClientRect(),
  clickPos = {
    x: event.clientX - rect.x,
    y: event.clientY - rect.y 
  }

  // Scale click to responsive canvas
  clickPos.x *= 1800 / rect.width;
  clickPos.y *= 1600 / rect.height;

  // Compare to existing markers
  for (const marker of markers) {
    let markerPos = latLongSphere(marker.lat + $.scroll.lat, marker.long + $.scroll.long, 630);

  // Make sure only frontside markers are clickable
  if(markerPos.z < 0) {
    continue;
  }

  if(Math.abs(clickPos.x - markerPos.x) < offset && Math.abs(clickPos.y -markerPos.y) < offset) {
   alert('clicked on marker: ' + marker.name);
   break;
  }
 }
}

const onClick=（事件）=>{
设偏移量=50，
rect=event.target.getBoundingClientRect（），
单击位置={
x:event.clientX-rect.x，
y:event.clientY-rect.y
}
//缩放单击到响应画布
单击位置x*=1800/矩形宽度；
单击位置y*=1600/直线高度；
//与现有标记进行比较
for（标记的常量标记）{
设markerPos=latLongSphere（marker.lat+$.scroll.lat，marker.long+$.scroll.long，630）；
//确保只有正面标记可单击
if（markerPos.z<0）{
继续；
}
if（Math.abs（clickPos.x-markerPos.x）

---

祝你好运

您可以这样做：

const onClick = (event) => {
let offset = 50,
  rect = event.target.getBoundingClientRect(),
  clickPos = {
    x: event.clientX - rect.x,
    y: event.clientY - rect.y 
  }

  // Scale click to responsive canvas
  clickPos.x *= 1800 / rect.width;
  clickPos.y *= 1600 / rect.height;

  // Compare to existing markers
  for (const marker of markers) {
    let markerPos = latLongSphere(marker.lat + $.scroll.lat, marker.long + $.scroll.long, 630);

  // Make sure only frontside markers are clickable
  if(markerPos.z < 0) {
    continue;
  }

  if(Math.abs(clickPos.x - markerPos.x) < offset && Math.abs(clickPos.y -markerPos.y) < offset) {
   alert('clicked on marker: ' + marker.name);
   break;
  }
 }
}

const onClick=（事件）=>{
设偏移量=50，
rect=event.target.getBoundingClientRect（），
单击位置={
x:event.clientX-rect.x，
y:event.clientY-rect.y
}
//缩放单击到响应画布
单击位置x*=1800/矩形宽度；
单击位置y*=1600/直线高度；
//与现有标记进行比较
for（标记的常量标记）{
设markerPos=latLongSphere（marker.lat+$.scroll.lat，marker.long+$.scroll.long，630）；
//确保只有正面标记可单击
if（markerPos.z<0）{
继续；
}
if（Math.abs（clickPos.x-markerPos.x）

祝你好运