リーフレットマーカーは常に適用されない

Question

リーフレット反応を使用していますので、いくつかの円マーカーを追加する必要があります。

このコードは...時々動作します。地図上をクリックすると円マークを追加する必要がありますが、そうでない場合もあります。一見無作為に、それは目に見えるマーカーを追加しません。ズームレベルを変更するとマーカーが表示されることがありますが、必ずしもそうとは限りません。すべてのコードが毎回実行されるので、addMarker（）が呼び出されていないとは限りません。最後のマーカーの削除（マークレイヤをクリアすることによって）も常に実行されます。

ありがとう、エド。

Answer 1

react-leafletパッケージを使用していないようです。私はそれを試してみることをお勧めします。ここでは、クリックイベントのマップにマーカーを追加したいどのようにするためのいくつかのサンプルコードは、次のとおりです。

const React = window.React; 
const { Map, TileLayer, Marker, Popup } = window.ReactLeaflet; 

class SimpleExample extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     markers: [[51.505, -0.09]] 
    }; 
    } 

    addMarker = (e) => { 
    const {markers} = this.state 
    markers.push(e.latlng) 
    this.setState({markers}) 
    } 

    render() { 
    return (
     <Map 
     center={[51.505, -0.09]} 
     onClick={this.addMarker} 
     zoom={13} 
     > 
     <TileLayer 
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
     /> 
     {this.state.markers.map((position, idx) => 
      <Marker key={`marker-${idx}`} position={position}> 
      <Popup> 
      <span>A pretty CSS3 popup. <br/> Easily customizable.</span> 
      </Popup> 
     </Marker> 
     )} 
     </Map> 
    ); 
    } 
} 

window.ReactDOM.render(<SimpleExample />, 
document.getElementById('container')); 

そしてここでは、実装を示すjsfiddleです：https://jsfiddle.net/q2v7t59h/413/