Листовка: контейнер карты не найден
у меня есть класс 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 ответов
в дополнение к ответу @IvanSanchez вы можете добавить геолокацию и L. map(...) код для метода жизненного цикла componentDidMount() React (в зависимости от того, какие другие цели вы надеетесь достичь). Вы также можете создавать и связывать обработчики событий для найденного местоположения.
этот путь должен быть добавлен dom и листовка может найти его.
рад помочь с этим, если это все еще неясно.