google.maps.Data图层zIndex设置不生效，如何调整图层显示层级？

你碰到的这个问题其实是Google Maps JavaScript API的一个内置特性——默认情况下，Point类型的要素会强制渲染在所有其他几何类型（比如Polygon、Polyline）的上方，哪怕你给多边形图层设置了远高于点的zIndex也没用。这是因为API的渲染引擎对不同几何类型有固定的优先级：非点要素先渲染，点要素最后渲染，普通的zIndex设置无法打破这个底层逻辑。

要解决这个层级问题，最实用的有两种方案：

方案一：把点要素转换成Marker（推荐） #

放弃用Data图层的Point，而是将所有点要素转换成Google Maps的Marker对象。Marker属于独立的图层类型，不受Data图层内部几何类型的渲染优先级限制，它的zIndex可以和Data图层的多边形正常竞争层级。

示例代码：

// 假设你已经有了包含所有要素的GeoJSON数据源
const pointFeatures = yourGeoJson.features.filter(f => f.geometry.type === 'Point');

// 遍历点要素，创建Marker
pointFeatures.forEach(feature => {
  const latLng = new google.maps.LatLng(
    feature.geometry.coordinates[1],
    feature.geometry.coordinates[0]
  );
  
  const marker = new google.maps.Marker({
    position: latLng,
    map: map,
    // 复用你原来的点样式配置
    icon: {
      fillColor:"#FF0000",
      fillOpacity:1,
      path:"M -1,-1 L -1,1 L 1,1 L 1,-1 L -1,-1 Z",
      rotation:0,
      scale:"6",
      strokeColor:"#000000",
      strokeOpacity:1,
      strokeWeight:1
    },
    zIndex: 2000000001 // 这个zIndex会和多边形的zIndex正常生效
  });
});

// 多边形图层保留原来的样式设置即可
const polygonLayer = new google.maps.Data();
polygonLayer.addGeoJson(yourGeoJson.features.filter(f => f.geometry.type === 'Polygon'));
polygonLayer.setStyle(feature => ({
  fillColor:"#AAAAAA",
  fillOpacity:1,
  strokeColor:"#000000",
  strokeOpacity:1,
  strokeWeight:1,
  zIndex:4000000000
}));
polygonLayer.setMap(map);

这种方法的好处是简单直接，而且Marker的行为和Data图层的要素类似，只是需要你自己管理Marker的生命周期（比如地图缩放时的更新、要素删除时的清理）。如果点要素数量很大，可以搭配MarkerClusterer来优化性能。

方案二：使用自定义OverlayView #

如果需要高度自定义点的渲染效果，可以用Google Maps的OverlayView来手动渲染点。通过设置OverlayView的zIndex，你可以完全控制它和Data图层的渲染顺序——把OverlayView的zIndex设得比多边形图层低，就能让多边形盖在上面。不过这种方法需要你自己实现渲染逻辑，相对复杂一些，适合有特殊需求的场景。

总结一下，方案一是最省心的解决办法，基本能覆盖大部分场景，推荐优先尝试。

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