Google Maps中使用forEach+setMap设置折线可见性报错：setMap is not a function

嘿，我刚好碰到过这个问题，你这里踩了个Google Maps API里很容易混淆的坑——map.data里的Feature对象和你手动创建的Polyline不是一回事，所以才会报setMap is not a function的错！

你通过map.data.loadGeoJson加载的要素是Google Maps Data层的Feature对象，这类对象是由Data层统一管理的，它不属于独立的Overlay（比如Polyline、Marker这类直接继承自OverlayView的对象），自然没有setMap()方法。Data层的要素显示/隐藏是通过样式系统来控制的，不是直接调用单个要素的方法。

方法一：用Data层自带的样式控制（推荐） #

这是最省心的方式，利用Data层的setStyle()方法，通过样式函数来动态控制要素的可见性。比如你可以根据要素的属性（比如你提到的skill）来决定是否显示：

map.data.loadGeoJson('data/trails2018.geojson', {}, function(features) {
  console.log("loadGeoJson callback "+features.length);

  // 初始化样式：根据skill属性控制可见性
  map.data.setStyle(function(feature) {
    const skill = feature.getProperty('skill'); // 获取你要判断的属性
    // 比如只显示skill为"beginner"的路线
    return {
      visible: skill === "beginner",
      strokeColor: "#FF0000", // 顺便设置下折线颜色，可选
      strokeWeight: 2
    };
  });

  // 如果之后需要动态修改某个要素的可见性，可以先给要素加自定义属性
  map.data.forEach(function(feature) {
    // 给每个要素添加一个自定义的isVisible属性，默认显示
    feature.setProperty('isVisible', true);
  });

  // 之后要隐藏某个要素时，只需要修改它的isVisible属性，样式会自动更新
  // 比如隐藏第一个要素：
  // const firstFeature = features[0];
  // firstFeature.setProperty('isVisible', false);
});

方法二：把Data要素转换成独立的Polyline对象 #

如果你一定要用setMap()方法来控制，那需要手动提取Data要素里的几何信息，自己创建Polyline实例：

map.data.loadGeoJson('data/trails2018.geojson', {}, function(features) {
  console.log("loadGeoJson callback "+features.length);
  const polylineList = [];

  map.data.forEach(function(feature) {
    const geometry = feature.getGeometry();
    // 只处理LineString类型的要素（也就是折线）
    if (geometry.getType() === 'LineString') {
      // 把GeoJSON的坐标转换成Google Maps的LatLng数组
      const path = geometry.getArray().map(point => 
        new google.maps.LatLng(point.lat(), point.lng())
      );
      // 创建独立的Polyline对象
      const polyline = new google.maps.Polyline({
        path: path,
        strokeColor: "#0000FF",
        strokeWeight: 3,
        map: map // 初始添加到地图上
      });
      polylineList.push(polyline);
    }
  });

  // 现在你就可以对polylineList里的对象调用setMap()了
  // 比如隐藏所有折线：
  // polylineList.forEach(poly => poly.setMap(null));
  // 重新显示：
  // polylineList.forEach(poly => poly.setMap(map));
});

优先用方法一，因为Data层会帮你处理要素的事件绑定、数据同步等问题，管理起来更方便；方法二适合你需要对单个折线做非常定制化操作的场景。

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