我已接近完成我在这张 map 中的需要,我添加了一个热图层来显示热图,并添加了一个数据层来从 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
});
最佳答案
有一个选项可以使用 setStyle
方法设置数据层的 zIndex
。您甚至可以对每个特征应用不同的 zIndex
if you pass it a function as argument .
但是,您的 map 包含的每个数据层都在 div 中呈现,该 div 是 overlayLayer 的子层(参见 MapPanes )。修改数据层的 zIndex 只会修改其相对于其他数据层的索引。有问题的 div 仍然有自己的 z-index(在我的例子中是 30)。
HeatmapLayer 将在 overlayLayer 的另一个 div 内呈现,在我的例子中,它的 z-index 为 15。
如果需要,您可以将数据层 z-index 设置为 -100,但其父元素 z-index 胜过热图父元素的 z-index。
现在,这是一个hacky 和肮脏的方式 做你想做的事。
1.- 创建辅助 google.maps.OverlayView获取对 map Pane 的引用。
var auxOverlay = new google.maps.OverlayView();
auxOverlay.draw = function () {};
auxOverlay.onAdd = function () {};
2.- 设置 OverlayView 的 map 属性。
auxOverlay.setMap(map);
3.- 获取对 overlayLayer
Pane 的引用并向其添加 ID。我将使用 jQuery。可能有人会说可以用 vanilla JS 来完成。好的,但我会用 jQuery 来完成。
jQuery(auxOverlay.getPanes().overlayLayer).attr('id','overlayLayer')
4.- 当没有自定义叠加层被添加到 map 时,数据层将是“overlayLayer”的唯一内容,所以你可以给它一个 ID
jQuery('#overlayLayer > div').first().attr('id','datalayer');
5.- 现在您有了对数据层容器的引用,因此,一旦您添加了热图,就可以使用对数据层容器的引用将其放在热图下方
例如,做
jQuery('#datalayer').css('z-index',10);
将其放在热图下方。
Hacky as hell,如果您想兼顾其他类型的层,当然无法扩展。
关于javascript - Google map - 热图层位于数据层之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46489397/