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

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

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

当我将鼠标悬停在一个块上时,我希望轮廓变为黑色。 我目前有以下代码:

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

但是,它不能在所有块上都起作用。我认为这是因为(取决于块的绘制顺序),有时其他块的折线在当前块的折线“上方”。

在此处输入图片说明

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

在此处输入图片说明

===============>>#1 票数:1

多个重叠的Polylines存在相同的问题。 我解决此问题的方法是使用zIndex初始化Polyline 对您来说,它应该类似于:

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

现在,您应该可以使用如下的mouseovermouseout事件来更改PolylineszIndex

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
    });
});

初始化不是严格必需的,但是如果没有初始化,则可能会遇到意外行为。

  ask by AllieCat translate from so

未解决问题?本站智能推荐:

关注微信公众号