如何设置此处具有z-index的地图组的渲染顺序

Question

我有一个添加了两个组的地图，每个组包含多个标记，并且希望它们中的第一个始终显示在第二个之上。

该地图使用此处的3.1内核，我已经尝试为每个组在opt_options参数中设置zIndex属性，而没有任何影响。可以随时将标记删除或添加到每个组。

这是我如何创建群组并将其添加到地图的方式：

const group1 = new H.map.Group({zIndex: 10});
const group2 = new H.map.Group({zIndex: 0});

map.addObjects([
    group1,
    group2
]);

现在可以随时通过订阅将标记添加到组之一中：

poiMarkers$.subscribe(pois => {
    group1.removeAll();

    pois.forEach(poi => {
        const marker = new H.map.Marker(poi.position, poi.icon);
        group1.addObject(marker);
    }) 
});

userMarker$.subscribe(user => {
    group2.removeAll();

    const marker = new H.map.Marker(user.position, user.icon);
    group2.addObject(marker);
});

现在所有标记都可以正确显示，但是group2标记仍显示在group group1上方。

Answer 1

似乎渲染顺序与html渲染顺序相比是倒置的。如果您查看https://developer.here.com/api-explorer/maps-js/markers/ordering-overlapping-markers处的代码示例，您会注意到，尽管增加了zIndex，单击标记也会将其向后移动。

因此，请尝试切换您的电话号码：

const group1 = new H.map.Group({zIndex: 0});
const group2 = new H.map.Group({zIndex: 10});