Google Maps JS API：loadGeoJson设置visible无效，如何预加载GeoJson不显示？

• 直接原因：你在setStyle里把visible拼写成了visibile（少了一个字母'l'），这个拼写错误导致初始隐藏设置完全失效。而控制台执行时你写对了拼写，所以能成功隐藏图层。
• 优化方案：如果要实现预加载后按需显示，更稳妥的方式是创建Data图层时暂不绑定到地图，等需要显示时再挂载，避免样式设置的潜在冲突。

修正后的代码示例：

let map;
let datalayer1;
let infowindow;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -37.022157, lng: 144.884673 },
    zoom: 8,
    mapTypeId: 'hybrid'
  });

  infowindow = new google.maps.InfoWindow();

  // 创建图层时不绑定map，避免自动显示
  datalayer1 = new google.maps.Data();

  // 正确设置样式（注意visible拼写）
  datalayer1.setStyle({
    fillColor: '#00d01b',
    strokeColor: '#00d01b',
    strokeWeight: 2,
    visible: false
  });

  // 后台预加载GeoJSON
  datalayer1.loadGeoJson("http://myremoteurl.com/sw.json");
}

// 按钮点击触发的显示函数
function showGeoJsonLayer() {
  // 确保图层可见，再绑定到地图
  datalayer1.setStyle(prev => ({ ...prev, visible: true }));
  datalayer1.setMap(map);
}

这样修改后，GeoJSON会在页面初始化时后台完成加载，用户点击按钮时图层会立即显示，完全避开下载延迟的问题。

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