javascript - 多条折线相互重叠 - 带来一个 "to the front"

Question

有没有办法将 block 的多边形(及其折线)带到顶层？

我正在为城市中的街区绘制折线(以形成多边形)。每个 block 多边形都用白色折线勾勒出轮廓:

 block = new google.maps.Polygon({
        paths: blockCoordinates,
        strokeColor: '#ffffff',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        fillColor: '#ff0000',
        fillOpacity: shadeValue
      }); }

当我将鼠标悬停在一个 block 上时，我希望轮廓变成黑色。我目前有这段代码:

google.maps.event.addListener(flightPath, 'mouseout', function (event) {
                this.setOptions({
                    strokeColor: '#ffffff'
                });
            });
google.maps.event.addListener(flightPath, 'mouseover', function (event) {
                this.setOptions({
                    strokeColor: '#000000'
                });
            });

但是，它不适用于所有 block 。我认为这是因为(取决于 block 的绘制顺序)，有时其他 block 的多段线在当前 block 多段线的“上方”。

如果我将白色折线的不透明度设置为 0(将黑色折线的不透明度设置为 1)。 它工作正常，但我当然看不到 block 之间漂亮的白线。

Answer 1

我对几条重叠的 Polylines 也有同样的问题。我解决这个问题的方法是用 zIndex 初始化 Polyline。对你来说它应该是这样的:

 block = new google.maps.Polygon({
    paths: blockCoordinates,
    strokeColor: '#ffffff',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    fillColor: '#ff0000',
    fillOpacity: shadeValue,
    zIndex: 1
  }); }

现在您应该可以像这样使用 mouseover 和 mouseout 事件更改 Polylines 的 zIndex :

google.maps.event.addListener(flightPath, 'mouseout', function (event) {
    this.setOptions({
        strokeColor: '#ffffff',
        zIndex: 1
    });
});
google.maps.event.addListener(flightPath, 'mouseover', function (event) {
    this.setOptions({
        strokeColor: '#000000',
        zIndex: 2
    });
});

初始化不是绝对必要的，但如果不这样做，您可能会遇到意外行为。