Реакция-листовка получить текущее значение на клике - PullRequest
Новая
       13

Реакция-листовка получить текущее значение на клике

0 голосов
/ 03 февраля 2019

Я был бы очень рад, если бы кто-нибудь мог помочь мне ... Я установил буклет реактива на свой реактивный проект, и компонент карты успешно загружен, мне нужно получить текущий текст и показать его во всплывающем окне, когда янажмите на карту, но я не знаю, как: (

пожалуйста ... пожалуйста ... помогите мне ...

это мой код 

import React from 'react'
import { Map as LeafletMap, TileLayer, Marker, Popup } from 'react-leaflet';

class Mapp extends React.Component {
    componentDidMount() {

    }

    render() {
        return (
            <LeafletMap
                center={[35.755229,51.304470]}
                zoom={16}
                maxZoom={20}
                attributionControl={true}
                zoomControl={true}
                doubleClickZoom={true}
                scrollWheelZoom={true}
                dragging={true}
                animate={true}
                easeLinearity={0.35}
            >
                <TileLayer
                    url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                />
                <Marker position={[35.755229,51.304470]}
                draggable={true}
                >
                    <Popup >
                        Popup for any custom information.
                    </Popup>

                </Marker>
            </LeafletMap>
        );
    }
}

export default Mapp;

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

Вот пример того, как отображать позицию производителя во всплывающем окне после нажатия на карту: 

<code>class MapExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPos: null
    };
    this.handleClick = this.handleClick.bind(this);
  }


  handleClick(e){
    this.setState({ currentPos: e.latlng });
  }

  render() {
    return (
      <div>
        <Map center={this.props.center} zoom={this.props.zoom} onClick={this.handleClick}>
          <TileLayer
              url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
          />
          { this.state.currentPos && <Marker position={this.state.currentPos} draggable={true}>
            <Popup position={this.state.currentPos}>
              Current location: <pre>{JSON.stringify(this.state.currentPos, null, 2)}
} )}}

Объяснение:

  • currentPos состояние используется для сохранения позиции маркера
  • event.latLng свойство обработчика события Map.onClick возвращает местоположение события мыши

Вот демоверсия для вашей справки

0 голосов
/ 03 февраля 2019

Что вы пытались достичь?

Это будет начало:

Используйте щелчок (см. Событие https://leafletjs.com/reference-1.4.0.html#map-click) из компонента LeafletMap и вызовите вашу функцию,как: 

<LeafletMap
  center={[35.755229,51.304470]}
  zoom={16}
  maxZoom={20}
  attributionControl={true}
  zoomControl={true}
  doubleClickZoom={true}
  scrollWheelZoom={true}
  dragging={true}
  animate={true}
  easeLinearity={0.35}
  onclick={this.handleClick}>
>
...
</LeafletMap>

В вашей функции handleClick вы получаете информацию о широте и ширине, например: 

handleClick = (e) => {
  const { lat, lng } = e.latlng;
  console.log(lat, lng);
}

С этого момента вы можете создавать свой маркер / всплывающее окно с информацией, которую выискали.

Дополнительная подсказка: пожалуйста, убедитесь, что ваш код правильно указан в вашем сообщении ..

...