Неправильное поведение окна карты GL с реагировать JS - PullRequest
Новая
       8

Неправильное поведение окна карты GL с реагировать JS

0 голосов
/ 18 ноября 2018

Когда я меняю положение карты, она возвращается в исходное положение. Как убрать это поведение? Мне нужно, чтобы при изменении положения карты карта оставалась в том же положении.

Неправильное поведение GIF https://gyazo.com/4fa3cf138ceacc1ffdb4cb9055f8b8f3

 <Map
          dragRotate={false}
          scrollZoom={true}
          zoom={[15]}
          center={[23.924760, 54.930400]}
          style="mapbox://styles/mapbox/streets-v9"
          containerStyle={{
            height: "500px",
            width: "100wv"
          }}>
          <ZoomControl/>
          <a href='https://goo.gl/maps/kPEmoBpFUPL2' className='link-primary map-link' target='_blank'>Directions</a>
          <Layer
            type="symbol"
            id="marker"
            layout={{ "icon-image": "harbor-15" }}>
            <Feature
              coordinates={[23.925960, 54.930854]}
            />
          </Layer>
        </Map>

1 Ответ

0 голосов
/ 18 ноября 2018

Когда пользователь перемещает карту, вам просто нужно обновить состояние карты, чтобы записать новое положение карты (широта / долгота, увеличение ...). Например: 

import React from 'react'
import ReactDOM from 'react-dom'
import mapboxgl from 'mapbox-gl'

mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';

class Application extends React.Component {

  constructor(props: Props) {
    super(props);
    this.state = {
      lng: 5,
      lat: 34,
      zoom: 1.5
    };
  }

  componentDidMount() {
    const { lng, lat, zoom } = this.state;
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [lng, lat],
      zoom
    });

    map.on('move', () => {
      const { lng, lat } = map.getCenter();
      this.setState({
        lng: lng.toFixed(4),
        lat: lat.toFixed(4),
        zoom: map.getZoom().toFixed(2)
      });
    });
  }

  render() {
    const { lng, lat, zoom } = this.state;
    return (
      <div>
        <div className="inline-block absolute top left mt12 ml12 bg-darken75 color-white z1 py6 px12 round-full txt-s txt-bold">
          <div>{`Longitude: ${lng} Latitude: ${lat} Zoom: ${zoom}`}</div>
        </div>
        <div ref={el => this.mapContainer = el} className="absolute top right left bottom" />
      </div>
    );
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));

Для полноценного примера, посмотрите их базовый шаблон на Github .

...