Как использовать реактивную листовку containerPointToLatLng? - PullRequest
Новая
       32

Как использовать реактивную листовку containerPointToLatLng?

0 голосов
/ 05 октября 2018

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

containerPointToLatLng не определен no-undef response-leaflet

Я пытался импортировать containerPointToLatLng через 

import {L,containerPointToLatLng } from 'leaflet';

Но это не сработало, любая идея?

1 Ответ

0 голосов
/ 15 октября 2018

containerPointToLatLng - это метод Map класса , в приведенном ниже примере показано, как разместить маркер, если заданы пиксельные координаты 

class MapExample extends React.Component {
  constructor(props) {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 8,
      markerPoint: {
        x: 733,
        y: 62
      }
    };
    this.refMap = React.createRef();

    this.setMarkerPos = marker => {
      const map = this.refMap.current.leafletElement;
      const m = marker.leafletElement;
      const markerLatLng = map.containerPointToLatLng(this.state.markerPoint);
      m.setLatLng(markerLatLng);
    };
  }


  render() {
    const { lat, lng, zoom } = this.state;
    const position = [lat, lng];
    return (
      <Map  ref={this.refMap}
        center={position} zoom={zoom}
      >
        <TileLayer 
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
        />
        <Marker position={{lat:0,lng:0}} ref={this.setMarkerPos.bind(this)} />
      </Map>
    );
  }
}

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

...