Question

我已接近实现我在此地图中所需的内容，我添加了一个Heatmap图层来显示热图和一个数据图层来从geojson数据中绘制多边形。如果你仔细看看下面的图像，你可以看到热图隐藏在多边形后面，我只需要帮助将热图图层置于顶部。提前致谢！：）

如果我减少多边形的不透明度，这就是结果，但是热图图层仍然落后，所以它还不够：/

以下是我正在使用的代码：

var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.0902 , lng: -95.7129},
    zoom: 4 });

map.data.loadGeoJson('http://localhost/gz_2010_us_040_00_500k.json');

var heatMapData = [
    {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
    {location: new google.maps.LatLng(46.965260, -109.533691), weight: 3},
    {location: new google.maps.LatLng(40.273502, -86.126976), weight: 1},
    {location: new google.maps.LatLng(38.573936, -92.603760), weight: 9},
    {location: new google.maps.LatLng(27.994402, -81.760254), weight: 2},
    {location: new google.maps.LatLng(39.876019, -117.224121), weight: 9},
    {location: new google.maps.LatLng(45.367584, -68.972168), weight: 4},
    {location: new google.maps.LatLng(44.182205, -84.506836), weight: 6},
    {location: new google.maps.LatLng(33.247875, -83.441162), weight: 1},
    {location: new google.maps.LatLng(21.289373, -157.917480), weight: 8},
    {location: new google.maps.LatLng(66.160507, -153.369141), weight: 3},
    {location: new google.maps.LatLng(35.860119, -86.660156), weight: 9},
];

heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData,
  map: map
});

Answer 1

可以使用zIndex方法设置数据层的setStyle。您甚至可以为每个功能if you pass it a function as argument应用不同的zIndex。

但是，地图包含的每个数据层都在div中呈现，div是overlayLayer的子节点（请参阅MapPanes）。修改数据层的zIndex只会修改其相对索引与其他数据层。有问题的div仍然有自己的z-index（在我的例子中它是30）。

HeatmapLayer将在overlayLayer中的另一个div中呈现，在我的情况下，它的z-index为15。

如果需要，您可以将数据层z-index设置为-100，但其父元素z-index胜过热图父元素的z-index。

现在，这是一个<强>黑客和肮脏的方式做你想做的事。

1.-创建辅助google.maps.OverlayView以获取对地图窗格的引用。

var auxOverlay = new google.maps.OverlayView();
auxOverlay.draw = function () {};
auxOverlay.onAdd = function () {};

2.-设置OverlayView的地图属性。

auxOverlay.setMap(map);

3.-获取对overlayLayer窗格的引用并为其添加ID。我将使用jQuery。可能有人会说它可以用香草JS完成。好的，但我会用jQuery来做。

jQuery(auxOverlay.getPanes().overlayLayer).attr('id','overlayLayer')

4.-如果没有在地图中添加自定义叠加层，则数据层将是“叠加层”的唯一内容，因此您可以为其提供ID

jQuery('#overlayLayer > div').first().attr('id','datalayer');

5.-现在您有了对数据层容器的引用，因此，一旦添加了热图，就可以使用对数据层容器的引用将其放在热图的下方

例如，做

jQuery('#datalayer').css('z-index',10);

将它放在热图下方。

Hacky as hell ，如果你想与其他类型的图层混淆，当然不可扩展。

Google地图 - 热图图层位于数据层之后

1 个答案: