如何在Next.js的ArcGIS地图上为多坐标标记点添加对应信息弹窗？

你的代码已经接近实现需求了，核心问题是点击事件中引用的graphic_symbol始终指向最后一个创建的标记，导致无论点击哪个点都弹出最后一条数据的信息。另外，ArcGIS JS API其实内置了标记点击弹窗的能力，我们可以用更简单的方式实现：

方案一：使用API默认弹窗行为（最推荐） #

ArcGIS JS API会自动识别带有popupTemplate的Graphic，当用户点击标记时自动弹出对应窗口，你只需要移除禁用自动弹窗的代码即可：

1. 删除这行代码：

map.popup.autoOpenEnabled = false;

2. 保留每个Graphic的popupTemplate设置（你已经写了这部分逻辑）。

这样修改后，点击任意标记点都会自动弹出对应的公司名称和描述，无需手动编写点击事件。

方案二：自定义点击事件（如需额外控制） #

如果需要对弹窗行为做更多自定义（比如添加前置校验、额外数据处理），可以修改点击事件代码，通过event.graphic获取当前点击的标记实例：

map.on("click", function(event) {
  // 仅当点击到标记点时才触发弹窗
  if (event.graphic) {
    map.popup.open({
      location: event.mapPoint,
      features: [event.graphic]
    });
  }
});

额外优化：修复循环变量作用域问题 #

你当前循环中使用var声明变量，会导致变量提升（整个函数作用域有效），虽然不影响方案一，但建议换成let（块级作用域）避免潜在的变量污染问题：

for(let i=0, i_length=vehicleData.length; i<i_length; i++){
  let point_symbol = new Point({
    longitude: vehicleData[i].longitude,
    latitude: vehicleData[i].latitude,
    spatialReference: { wkid: 3857 }
  });
  let template = new PopupTemplate({
    title: vehicleData[i].company,
    content: vehicleData[i].description
  });
  let graphic_symbol = new Graphic({
    geometry: point_symbol,
    symbol: {
      type: "simple-marker",
      style: "circle",
      color: "orange",
      size: "18px",
      outline: {
        color: [150, 200, 255],
        width: 5
      }
    },
    popupTemplate: template
  });
  map.graphics.add(graphic_symbol);
}

为什么原来的代码不生效？ #

你之前的点击事件中，graphic_symbol是用var声明的，在循环结束后它指向的是最后一次迭代创建的Graphic，所以无论点击哪个点，都会弹出最后一条数据的信息。而使用event.graphic可以直接获取当前点击的标记实例，确保弹窗内容和点击的标记完全对应。

内容的提问来源于stack exchange，提问作者Deep Kakkar