我在我的地图中的国家中添加了一个悬停状态，但是悬停状态仅在工作室环境中起作用，而在任何其他外部嵌入中不起作用，例如iframe或preview.

Question

map.addInteraction("move-handler", {
  type: "mousemove",
  target: {
    "layerId": "available-countries"
},
  handler: (e) => {

    if (e.feature) {
      if (feature) {
        map.setFeatureState(feature, { ["hover-state"]: false });
      }

      feature = e.feature;
      console.log(feature);
      map.setFeatureState(feature, { ["hover-state"]: true });
    }

    if (feature) {
      map.setFeatureState(feature, { ["hover-state"]: false });
      feature = null;
    }
  }
});

您希望功能的事实是指示必须明确。悬停状态只是说“此功能悬停在悬空”的第一步，但它没有说“此功能必须改变颜色”。

我从未使用过Mapbox，但我快速潜入他们的文档，看来功能具有“突出显示”状态。考虑到这一点，我更新了您的代码，以突出鼠标徘徊在它们上面时的功能，并在鼠标离开时撤消。似乎“悬停”状态仍然必须设置为正确才能实现亮点，因此我为什么保留它：

let map = new mapboxgl.Map({
    container: "map",
    style: 'mapbox://styles/eirinigialou/cm6qmuu6w010p01r5hluj8s7q',
    center: [6.34, 28.99],
    scrollZoom: false,
    renderWorldCopies: false,
    height: "100%"
});



map.on('load', () => {
    map.resize();
});


//add interactions
map.addInteraction("move-handler", {
    type: "mousemove",
    target: {
        "layerId": "available-countries"
    },
    handler: (e) => {
        if (e.feature) {
            map.setFeatureState(e.feature, {
                ["hover-state"]: true
            });
            map.setFeatureState(e.feature, {
                ["highlight"]: true
            });
        }
    }
});

map.addInteraction("leave-handler", {
    type: "mouseleave",
    target: {
        "layerId": "available-countries"
    },
    handler: (e) => {
        if (e.feature) {
            map.setFeatureState(e.feature, {
                ["hover-state"]: false
            });
            map.setFeatureState(e.feature, {
                ["highlight"]: false
            });
        }
    }
});

使用文档链接

Answer 1