使用ArcGIS API for JS遍历数组创建地图点位问题求助

核心问题分析 #

• 经纬度类型错误：你通过innerHTML获取的经纬度是字符串类型，几乎所有地图API都要求经纬度是数字类型，字符串会导致点位无法被解析，直接造成地图加载失败或显示空白。
• 缺少完整的点位创建与添加流程：你只定义了单个点位的结构，但没有把循环创建的点位实际添加到地图中的逻辑。

修正后的代码示例 #

1. 修复数组创建（转换经纬度为数字） #

var div = document.getElementById('divholder');
var divs = div.getElementsByClassName('volcdiv');
var divArray = [];

for (var i = 0; i < divs.length; i += 1) {
  var volcanoname = divs[i].querySelector(".volcanoname").innerHTML.trim();
  // 关键：把字符串转成浮点数字，同时去除可能的空格
  var volcanolat = parseFloat(divs[i].querySelector(".volcanolat").innerHTML.trim());
  var volcanolon = parseFloat(divs[i].querySelector(".volcanolon").innerHTML.trim());
  
  // 过滤无效数值（比如转成NaN的非法值）
  if (!isNaN(volcanolat) && !isNaN(volcanolon)) {
    divArray.push({
      "volcanoname": volcanoname, 
      "volcanolat": volcanolat, 
      "volcanolon": volcanolon 
    });
  }
}

2. 循环创建并添加点位到地图 #

以下是通用逻辑，你可以替换成自己使用的地图API的对应方法：

// 遍历火山数组，逐个创建点位
divArray.forEach(function(volcano) {
  var pointX = {
    type: "point",
    longitude: volcano.volcanolon,
    latitude: volcano.volcanolat,
    name: volcano.volcanoname // 可选：携带名称用于弹窗标注
  };
  
  // 替换成你的地图API添加点位的方法，比如：
  // map.addMarker(pointX);
  // 如果是GeoJSON格式，可构建Feature对象后添加：
  /*
  var geoJsonFeature = {
    type: "Feature",
    geometry: {
      type: "Point",
      coordinates: [volcano.volcanolon, volcano.volcanolat]
    },
    properties: { name: volcano.volcanoname }
  };
  map.addLayer(geoJsonFeature);
  */
});

额外排查要点 #

• 打开浏览器控制台（F12）查看报错信息：比如DOM元素找不到、地图API加载失败、数值NaN等，这是最快定位问题的方式。
• 确认经纬度数值合法：纬度范围必须是**-90_{90**，经度是**-180}180**，超出范围的数值地图无法识别。
• 检查地图容器样式：确保承载地图的<div>设置了明确的宽高（比如width: 100%; height: 600px;），否则地图会显示为空。

内容的提问来源于stack exchange，提问作者Harry BM