如何设置Leaflet marker透明度，修复按缩放层级显隐标记的报错

问题原因 #

• 直接报错根源：Leaflet 中通过 L.marker 创建的是图层实例对象，并非 DOM 元素，不存在 style 属性，直接访问 markerS.style 会得到 undefined，对 undefined 的属性赋值就会触发你遇到的类型错误。
• 逻辑错误：if 分支中写的是 markerS.style.display == "block"，这里用了相等判断运算符 ==，而非赋值运算符 =，就算 style 属性存在这行代码也不会修改元素显示状态。
• 体验缺陷：当前逻辑仅在调用 getjson 时执行一次显隐判断，用户手动缩放地图时不会自动更新 marker 的显示状态。

修复方案 #

方案1：使用Leaflet原生图层操作（推荐，不会破坏Marker内部状态） #

通过官方提供的图层添加/移除接口控制显隐，逻辑更稳定：

const markerS = L.marker([0, 0], {icon: start}).addTo(mymap);
const api_url = 'json.php'

// 单独封装缩放判断逻辑，可复用
function toggleMarkerByZoom() {
  const zoom = mymap.getZoom();
  if(zoom > 15) {
    // 仅当marker不在地图上时才添加，避免重复添加报错
    if(!mymap.hasLayer(markerS)) {
      markerS.addTo(mymap);
    }
  } else {
    // 仅当marker在地图上时才移除
    if(mymap.hasLayer(markerS)) {
      mymap.removeLayer(markerS);
    }
  }
}

async function getjson() {
  const response = await fetch(api_url);
  const data = await response.json();
  const start = data[0];
  markerS.setLatLng([start.latitude, start.longtitude]);
  // 数据加载完成后先执行一次显隐判断
  toggleMarkerByZoom();
}

// 绑定地图缩放结束事件，每次缩放自动触发显隐判断
mymap.on('zoomend', toggleMarkerByZoom);

方案2：操作Marker对应DOM元素 #

如果需要保留marker在图层中仅修改显隐，可先获取marker对应的DOM元素再操作样式：

// 仅需替换toggleMarkerByZoom逻辑即可，其余代码和方案1一致
function toggleMarkerByZoom() {
  const zoom = mymap.getZoom();
  // 先获取marker对应的DOM元素，避免元素未渲染时报错
  const markerDom = markerS.getElement();
  if(!markerDom) return;
  markerDom.style.display = zoom > 15 ? "block" : "none";
}

内容的提问来源于stack exchange，提问作者Redynan frozt