Question

我一直在寻找这个问题的答案，如果是的话请原谅我。我有一个 here maps 实例，它采用一些道具来获取用户在进入页面时指定的信息，并相应地将不同的多边形呈现到地图上。我的问题在于我需要在发生不同事件时改变多边形的样式，例如悬停在多边形上等。我一直在寻找一个简单的修复方法，它可以让我只指定一个悬停：在多边形的样式字段中，但似乎没有任何效果。现在我被迫删除旧的多边形并在鼠标进入时重新渲染一个新的多边形，但这是一个非常有问题的解决方案。有谁知道如何在多边形上指定悬停样式？

这是一个代码片段：

const newLine = new H.geo.LineString()
    polygon[1].coordinates.map((m) => {
    newLine.pushPoint({ lat: m[0], lng: m[1] })
        });

        let color = hexToRgb(MAPCOLORS.colors[index]);
     
          let basePolygon = new H.map.Polygon(newLine, {
            style: {
                fillColor: `rgba(${color.r}, ${color.g}, ${color.b}, .3)`,
                strokeColor: "black",
                strokeColor: "#a99136",
             
            },
          
          });
          const highlightedPolygon = new H.map.Polygon(newLine, {
            style: {
 
                fillColor: "rgba(30, 139, 195, .55)",
                strokeColor: "#a99136",
                lineWidth: 5,
            
            }
            });
 basePolygon.addEventListener("pointerenter", (event) => {
        map.addObject(highlightedPolygon);
         this.setState({selectedId: event.target.la.id})
          const bubble = new H.ui.InfoBubble({ lng: obj.center[1], lat: obj.center[0]}, {
            content: polygon[0].split("_").join(" ")
          });
          ui.addBubble(bubble);
            });
            basePolygon.addEventListener("pointerleave", (event) => {
              map.removeObject(highlightedPolygon);
              const bubbleToRemove = ui.getBubbles();
              if (bubbleToRemove.length > 0) {
                ui.removeBubble(bubbleToRemove[bubbleToRemove.length - 1]);
              }
              
            });

Here Maps 在悬停时更改多边形颜色和线宽

0 个答案: