Javascript 将传单标记与bage循环反应

我正在使用

react传单

，我需要多个带有徽章的标记，但每当我在地图上使用

onMoveEnd

和

setState

时，就会导致循环和错误。

同样，当我使用

onDragEnd

而不是

onMoveEnd

时，循环问题消失了，但我不能

再将
拖动到我想要的地方

const onMapMoveEnd = (e) => {
    setCenter(e.target.getCenter())
}


<Map ref={mapRef} onMoveend={(e) => onMapMoveEnd(e)}>

    markers.map( (mark, index) => <MarkerWithBadge markerIcon={myIcon}  position={position}>
    {index}
    </MarkerWithBadge>
    )

const onMapMoveEnd=（e）=>{
setCenter（e.target.getCenter（））
}
onMapMoveEnd（e）}>
markers.map（（标记，索引）=>
{index}
)


const MarkerWithBadge=props=>{
常量initMarker=ref=>{
如果（参考）{
const popup=L.popup（）.setContent（props.children）；
参考元素
.addTo（ref.contextValue.map）
.bindPopup（弹出{
类名：“徽章”，
//closeOnClick:false，
自动关闭：错误
})
.openPopup（）
//防止徽章在单击时消失
.关闭（“点击”）；
}
};
返回；
};
导出默认标记WithBadge；
尝试将
L.popup（）
的
autoPan
选项设置为
false
。它防止地图平移以适应打开的弹出窗口。至少对我来说，这就是解决问题的方法

文档参考：.
尝试将
L.popup（）
的
autoPan
选项设置为
false
。它防止地图平移以适应打开的弹出窗口。至少对我来说，这就是解决问题的方法

文件参考：

const MarkerWithBadge = props => {
  const initMarker = ref => {
    if (ref) {
      const popup = L.popup().setContent(props.children);
      ref.leafletElement
        .addTo(ref.contextValue.map)
        .bindPopup(popup, {
          className: "badge",
          // closeOnClick: false,
          autoClose: false
        })
        .openPopup()
        // prevent badge from dissapearing onClick
        .off("click");
    }
  };
  return <Marker ref={initMarker} {...props} />;
    };

    export default MarkerWithBadge;