javascript 如何在点击或拖动时禁用黑色边框?

puruo6ea  于 2022-12-28  发布在  Java
关注(0)|答案(1)|浏览(136)

我的图书馆传单有问题。我有很大的JSON数据,它渲染和显示不同地区的边界。
我在我的GeoJSon中添加了一个工具提示,它显示了这个地区的名称。但是当我用这个GeoJSon元素点击或interact(dragging)时,它显示了一个黑色的边框。请看照片。

<MapContainer
        key={key}
        zoomControl={false}
        dragging={true}
        center={mapCenter}
        zoom={mapZoom}
        scrollWheelZoom={true}
        style={{ height: "100%", flex: 1 }}
      >
        <TileLayer
          minZoom={4}
          maxZoom={9}
          attribution=""
          url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />

data.map((subRegion) => (
              <GeoJSON
                style={{
                  color: "transparent",
                  fillColor: "#228B22",
                }}
                eventHandlers={{
                  mouseover: function () {
                    this.setStyle({
                      color: "#0fa80f",
                      opacity: 1,
                    });
                  },
                  mouseout: function () {
                    this.setStyle({
                      opacity: 0,
                    });
                  },
                  click: function (el) {
                    setSubRegion(subRegion.name);
                    handleChangeMap(el);
                  },
                }}
                key={subRegion.properties.NAME_1}
                data={subRegion.geometry}
              >
                <Tooltip sticky>
                  {subRegion.name}
                </Tooltip>
              </GeoJSON>
            ))

</MapContainer>
pqwbnv8z

pqwbnv8z1#

传单提供css中的大纲样式,而焦点(拖动或点击),你只需要在你的代码中实现这一点:

g:focus {
  outline: none;
}

path:focus {
  outline: none;
}

相关问题