Notice: la Carte contenant pas trouvé
J'ai le dessous de réagir classe qui extrait la géolocalisation via le navigateur.
Je suis le mappage d'un dépliant carte. Je veux de la géolocalisation être une entrée à la setView, tels que la carte des "zooms" dans la région de la client d'adresse du navigateur.
Voici la réagir la classe:
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
Il est appelé dans un fichier principal où le code HTML est affiché comme <WorldMap />
.
Je reçois le message d'erreur Uncaught Error: Map container not found.
lors du chargement de la page. En regardant autour, habituellement, ce serait parce que la carte est d'essayer d'être affiché dans un div en avant les valeurs de((gelocation, 3) dans ce cas). Cependant, elle ne devrait pas l'afficher avant d'être renvoyée de la fonction rendu ci-dessous.
Quelle pourrait-être la question?
L'impression de l' geolocation
dans la console correctement récupère les coordonnées, donc ça ne semble pas être le problème.
OriginalL'auteur cbll | 2017-03-07
Vous devez vous connecter pour publier un commentaire.
La
<div id="leafletmap">
doit être ajouté au dom avant appelL.map('leafletmap')
.Voir github.com/PaulLeCam/react-leaflet/blob/master/src/Map.js - l'appel à
L.map()
est fait lorsque le composant est monté, et non pas lorsque le composant est rendu.Je ne peux pas vraiment le sens de cet exemple par rapport à la mienne, en raison de la façon de Réagir de la classe est structuré(plus récente de la syntaxe que de la mienne)
OriginalL'auteur
En plus de @IvanSanchez de réponse, Vous pouvez ajouter de la géolocalisation et L. carte (...), code de componentDidMount() Réagissent cycle de vie de la méthode (en fonction de quels autres objectifs que vous espérez atteindre). Vous pouvez également créer et lier des gestionnaires d'événement pour l'emplacement.
De cette façon doit avoir été ajouté dans les dom et de la brochure de la trouver.
Heureux de vous aider avec ceci si c'est toujours pas clair.
OriginalL'auteur