谷歌地图 - 热图层位于数据层后面

Question

我已经接近实现我在这张地图中所需要的，我添加了一个 Heatmap 层来显示热图和一个 Data 层来从 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

有一个选项可以使用setStyle 方法设置数据层的zIndex。您甚至可以为每个功能 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。可能有人会说可以用vanilla 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 太棒了，如果你想同时处理其他类型的层，当然是不可扩展的。