Leaflet-Marker, die nicht immer angewendet werden

Question

Also verwende ich Leaflet-react und ich muss einige Kreismarker hinzufügen.

Jetzt funktioniert dieser Code ... manchmal. Auf dem Kartenklick sollte ein Kreismarker hinzugefügt werden, manchmal nicht. Scheinbar zufällig wird es einfach keinen sichtbaren Marker hinzufügen. Manchmal wird der Marker sichtbar, wenn ich die Zoomstufe verändere, aber nicht immer. Der gesamte Code wird jedes Mal ausgeführt, so dass addMarker() nicht aufgerufen wird, auch das Entfernen des letzten Markers (durch Löschen des Mark-Layers) wird immer ausgeführt.

Danke, Ed.

Answer 1

Es scheint, dass Sie das react-leaflet-Paket nicht verwenden. Ich würde empfehlen, das auszuprobieren. Hier ist ein Beispiel-Code für wie Sie Markierungen auf der Karte auf Click-Ereignisse hinzufügen würde:

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')); 

Und hier ist ein jsfiddle zeigt die Umsetzung: https://jsfiddle.net/q2v7t59h/413/