javascript - bootstrap - Folleto: Mapa contenedor no encontrado

bootstrap map js

Question

Tengo la siguiente clase de reacción que recupera la geolocalización a través del navegador.

Estoy mapeando un mapa de folletos. Quiero que la geolocalización sea una entrada para el setView, para que el mapa "se acerque" a la región de la ubicación del navegador del cliente.

Aquí está la clase de reacción:

    import React from ''react'';
    import L from ''leaflet'';
    import countries from ''./countries.js''; 

    var Worldmap = React.createClass({

        render: function() {

            let geolocation = [];

            navigator.geolocation.getCurrentPosition(function(position) {
                let lat = position.coords.latitude;
                let lon = position.coords.longitude;
                geolocation.push(lat, lon);
                locationCode()
            });

            function locationCode() {
                if(geolocation.length <= 0)
                    geolocation.push(0, 0);
            }


            let map = L.map(''leafletmap'').setView(geolocation, 3);

            L.geoJSON(countries, {
                style: function(feature) {
                    return {
                        fillColor: "#FFBB78",
                        fillOpacity: 0.6,
                        stroke: true,
                        color: "black",
                        weight: 2
                    };
                }
            }).bindPopup(function(layer) {
                return layer.feature.properties.name;
            }).addTo(map);

            return (
                <div id="leafletmap" style={{width: "100%", height: "800px" }}/>
            )
        }
    });

    export default Worldmap

Se llama en un archivo principal donde el HTML se representa como <WorldMap /> .

Recibo el error Uncaught Error: Map container not found. Al cargar la página. Mirando a su alrededor, generalmente sería porque el mapa está tratando de mostrarse en un div antes de que se le proporcionen los valores ((ubicación geográfica, 3) en este caso). Sin embargo, no debería mostrarlo antes de ser devuelto desde la función de renderización a continuación.

¿Cuál podría ser el problema?

Al imprimir la geolocation en la consola, se obtienen correctamente las coordenadas, por lo que no parece ser el problema.

Answer 1

Además de la respuesta de @ IvanSanchez, puede agregar el código de geolocalización y L.map (...) a componentDidMount () React sobre el método del ciclo de vida (según los otros objetivos que espera alcanzar). También puede crear y enlazar controladores de eventos para la ubicación encontrada también.

De esta manera se debe haber agregado el dom y el folleto que puede encontrar.

Feliz de ayudar con esto si aún no está claro.

Answer 2

El <div id="leafletmap"> debe agregarse a la dom antes de llamar a L.map(''leafletmap'') .