Листовка: контейнер карты не найден

у меня есть класс react ниже, который извлекает геолокацию через браузер.

я сопоставляю карту листовки. Я хочу, чтобы геолокация была входом в setView, для того, чтобы карта "увеличивалась" в область расположения браузера клиента.

вот класс react:

    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

он вызывается в главном файле, где HTML отображается как <WorldMap />.

Я получаю ошибку Uncaught Error: Map container not found. при загрузке страницы. Оглядываясь вокруг, обычно это было бы потому, что карта пытается отображаться в div перед предоставлением значений((gelocation, 3) в этом случае). Однако он не должен отображать его перед возвращением из функции рендеринга ниже.

В чем может быть проблема?

печати geolocation в консоли правильно выбирает координаты, так что это не кажется проблемой.

2 ответов


на <div id="leafletmap"> необходимо добавить в dom до вызов L.map('leafletmap').


в дополнение к ответу @IvanSanchez вы можете добавить геолокацию и L. map(...) код для метода жизненного цикла componentDidMount() React (в зависимости от того, какие другие цели вы надеетесь достичь). Вы также можете создавать и связывать обработчики событий для найденного местоположения.

этот путь должен быть добавлен dom и листовка может найти его.

рад помочь с этим, если это все еще неясно.