Je voudrais ajouter le module "React-leaflet-Locate-control" sur Map. Malheureusement, j'ai cette erreur "TypeError: Cannot read property 'addLayer' of undefined" et je ne sais pas comment corriger cette erreur.
Pouvez-vous m'aider s'il vous plaît?
Voici mon composant Carte:
import './Map.css'; import React, { Component } from 'react'; import { Map, TileLayer, Marker, Popup } from 'react-leaflet'; import L from "leaflet"; import { getLat, getLng } from '../../Store.js'; import SearchBar from '../SearchBar/SearchBar.js'; import LocateControl from 'react-leaflet-locate-control'; const customMarker = new L.icon({ iconUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png", iconSize: [25, 41], iconAnchor: [13, 0] }); export default class MapLeaflet extends Component { constructor(props) { super(props); this.state = { lat: getLat(), lng: getLng(), } } updateMarker = (e) => { this.props.updateMarkerPosition(e.latlng.lat, e.latlng.lng); this.setState({ lat: e.latlng.lat, lng: e.latlng.lng }) } render() { const position = [this.state.lat, this.state.lng] const locateOptions = { position: 'topright', strings: { title: 'Show me where I am, yo!' }, onActivate: () => {} // callback before engine starts retrieving locations } return ( <div className="map"> <Map center={position} zoom={13} className="map" onClick={this.updateMarker}> <TileLayer attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={position} icon={customMarker}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> <SearchBar /> <LocateControl options={locateOptions} startDirectly/> </Map> </div> ) } }
3 Réponses :
react-leaflet-Locate-control
package n'est pas compatible avec la dernière version (v2) de react-leaflet
a> et en fait, le problème similaire a été signalé ici Puisque react-leaflet-Locate-control
représente un wrapper pour dépliant -locatecontrol
plugin , le composant personnalisé suivant pour react-leaflet
pourrait être utilisé à la place et offre la même fonctionnalité que react-leaflet-Locate-control code >:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css">
1) installer un plugin:
npm install leaflet.locatecontrol
2) incluez les ressources CSS suivantes dans
public / index.html
:import React, { Component } from "react"; import { withLeaflet } from "react-leaflet"; import Locate from "leaflet.locatecontrol"; class LocateControl extends Component { componentDidMount() { const { options, startDirectly } = this.props; const { map } = this.props.leaflet; const lc = new Locate(options); lc.addTo(map); if (startDirectly) { // request location update and set location lc.start(); } } render() { return null; } } export default withLeaflet(LocateControl);
Voici une démo ( code source )
Merci pour votre aide Bro :) Bonne journée
Si vous utilisez Typescript comme moi. Je l'ai fait fonctionner avec v2
en utilisant le code de composant ci-dessous
.leaflet-control-locate a.leaflet-bar-part div { background-image: url(../../images/geolocation.png); background-size: 22px 74px; background-position: top 2px left 2px; background-repeat: no-repeat; width: 30px; height: 30px; } .leaflet-control-locate a.leaflet-bar-part div.loading { background-position: top -24px left 2px; } .leaflet-control-locate.active a.leaflet-bar-part div.locate { background-position: top -50px left 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .leaflet-control-locate a.leaflet-bar-part div { background-image: url(../../images/geolocation-2x.png); } }
De plus, vous pouvez ignorer les fichiers css de Font awesome et de la bibliothèque et fournir vos propres styles à la place p >
Geolocate.css
import L from 'leaflet'; import { withLeaflet, MapControl, MapControlProps } from 'react-leaflet'; import Locate from 'leaflet.locatecontrol'; import './Geolocate.css'; type GeolocateProps = L.Control.LocateOptions & MapControlProps; class Geolocate extends MapControl<GeolocateProps> { createLeafletElement(props: GeolocateProps) { const { leaflet, ...options } = props; const locate = Locate as any; const lc = new locate(options); return lc; } } export default withLeaflet(Geolocate);
Bien sûr, vous devrez installer leaflet.locatecontrol
en utilisant npm
d'abord
npm i leaflet.locatecontrol
J'espère que cela vous aidera.
En fait, vous n'avez besoin d'aucun module externe pour obtenir l'emplacement actuel dans react ou dans toute autre bibliothèque JavaScript
que vous pouvez utiliser
const [currentLocation, setCurrentLocation] = React.useState([0, 0]); //change [0,0] to something that makes sense to your users in case they deny access to location. useEffect(() => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( position => setCurrentLocation([position.coords.latitude, position.coords.longitude])) } }, []); return ( <Map center={currentLocation} zoom={15}> // the rest ie . TileLayer,Marker,Popup </Map>
Voici une méthode de réaction:
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(position => //Do something with it ); }
Ce problème Github semble lié à votre problème: github.com/PaulLeCam/react -leaflet / issues /…