React Leaflet: agregue marcadores dinámicamente

Solución:

Para aprovechar al máximo reaccionar-leaflet, debería pensar cómo puede diseñar la representación de su mapa de manera que el ciclo de vida de reacción maneje tanto los clics como la visualización de marcadores. React-leaflet maneja casi todo el trabajo de los folletos por usted.

Debería utilizar el estado o los accesorios del componente para realizar un seguimiento de los marcadores que muestra el componente. Entonces, en lugar de llamar manualmente L.marker, simplemente debería renderizar un nuevo <Marker> componente.

Aquí está la forma de reacción para agregar un marcador después de hacer clic en el mapa:

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

Y aquí hay un jsfiddle: https://jsfiddle.net/q2v7t59h/413/

Utilicé el siguiente código y funciona correctamente. En este código, el usuario puede agregar solo un marcador en una posición y puede cambiar:

preste atención al archivo de importación leaflet.css

algunas veces hay dos errores sobre la carga de la imagen después de agregar el archivo de folleto. Para resolver estos errores, importe marker-icon.png y marker-shadow.png en la parte de importación y luego defina el enlace L.Marker.prototype.options.icon a continuación.

si el mapa no se muestra, agregue la altura y el ancho (estilo = {{ancho: ‘100%’, alto: ‘400px’}}) a la etiqueta del mapa como estilo

import React from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

class OSMap extends React.Component {
    constructor() {
        super();
        this.state = {
            markers: [[35.6892, 51.3890]],
        };
    }

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

    render() {
        let DefaultIcon = L.icon({
            iconUrl: icon,
            shadowUrl: iconShadow
        });
        L.Marker.prototype.options.icon = DefaultIcon;

        return (
            <div>
                <Map
                    center={[35.6892, 51.3890]}
                    onClick={this.addMarker}
                    zoom={13}
                    maxZoom={18}
                    minZoom={5}   
                    style={{width: '100%',height: '400px'}}
                >
                    <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}></Marker>
                    )}
                </Map>
            </div>
        );
    }
}

export default OSMap;

---

---

Utiliza Nuestro Buscador