Реагировать Найти на карте

Я хотел бы добавить модуль «React-leaflet-locate-control» на карту. К сожалению, у меня есть эта ошибка «TypeError: Невозможно прочитать свойство addLayer неопределенного», и я не знаю, как исправить эту ошибку.

Не могли бы вы мне помочь ?

Вот моя карта компонентов:

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/[email protected]/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='&amp;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>
        )
    }
}

reactjs javascript react-leaflet
person Kloni    schedule 08.01.2019    source источник
comment
Эта проблема с github связана с вашей проблемой: github.com/PaulLeCam/react -буклет/вопросы/   -  person Treycos    schedule 09.01.2019

Ответы (3)


arrow_upward
15
arrow_downward

react-leaflet-locate-control пакет несовместим с последней версией (v2) react-leaflet и фактически о подобной проблеме сообщалось здесь

Поскольку react-leaflet-locate-control представляет собой оболочку для leaflet-locatecontrol плагина, вместо него можно использовать следующий пользовательский компонент для react-leaflet, который предлагает та же функциональность, что и react-leaflet-locate-control:

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);

Установка

1) установить плагин: npm install leaflet.locatecontrol

2) включить следующие ресурсы CSS в public/index.html:

<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">

Вот демонстрация (исходный код)

person Vadim Gremyachev    schedule 09.01.2019
comment
Спасибо за помощь Бро :) Хорошего дня - person Kloni; 10.01.2019

arrow_upward
0
arrow_downward

Если вы используете Typescript, как я. Я заставил его работать с v2, используя приведенный ниже код компонента.

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);

Кроме того, вы можете пропустить включение собственных CSS-файлов Font Awesome и библиотеки и вместо этого предоставить свои собственные стили.

Geolocate.css

.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);
  }
}

Конечно, сначала вам придется установить leaflet.locatecontrol с помощью npm.

npm i leaflet.locatecontrol

Надеюсь это поможет.

person Saad    schedule 20.03.2020

arrow_upward
0
arrow_downward

На самом деле вам не нужен внешний модуль для получения текущего местоположения в реакции или любых других библиотеках JavaScript.

вы можете использовать

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => //Do something with it  );
  }

Вот способ реагирования:

 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>
person Daniel    schedule 05.10.2020