У меня проблема с управлением вращением, не работающим для response-map-gl.Карта отображается без и выдачи, а элементы управления увеличением / увеличением работают нормально, но управление вращением ничего не делает.Я просмотрел документацию, но не вижу проблемы.Вот мой код:
import React, { Component } from 'react';
import ReactMapGL, { NavigationControl } from 'react-map-gl';
import styles from './styles/ViewMap.module.scss'
import mapPin from './img/mapPin.png'
export default class Map extends Component {
constructor(props) {
super(props);
this.state = {
viewport: {
width: '100%',
height: '100%',
latitude: 37.7577,
longitude: -122.4376,
zoom: 12
},
mapStyle: "streets-v9",
style: 'mapbox://styles/mapbox/',
};
this.mapStyle_onChange = this.mapStyle_onChange.bind(this);
}
componentDidMount() {
console.log("DIDMOUNT");
}
mapStyle_onChange(e) {
this.setState({ mapStyle: e.currentTarget.value, latitude: 0, longitude: 0 });
}
render() {
return (
<div className={styles.parentMapContainer}>
<div ref={el => this.mapContainer = el} className={styles.mapContainer}>
<div className={styles.mapStyleRow}>
<input type="radio" id="rdStreets" value="streets-v9" onChange={this.mapStyle_onChange} className={styles.mapStyleRadio} name="mapStyle" checked={this.state.mapStyle === "streets-v9"} />
<div className={styles.mapStyleLabel}>Street</div>
<input type="radio" id="rdSatellite" value="satellite-v9" onChange={this.mapStyle_onChange} className={styles.mapStyleRadio} name="mapStyle" checked={this.state.mapStyle === "satellite-v9"} /><div className={styles.mapStyleLabel}>Satellite</div>
</div>
<ReactMapGL
mapStyle={this.state.style + this.state.mapStyle}
mapboxApiAccessToken='pk.eyJ1INybW91bTJsbDF3dyJ9.vWoue-jEOJBbffqeMZDIEw'
{...this.state.viewport}
onViewportChange={(viewport) => this.setState({ viewport })}>
<div style={{ position: 'absolute', right: 0 }}>
<NavigationControl onViewportChange={(viewport) => this.setState({ viewport })} />
</div>
</ReactMapGL>
</div>
</div>
);
}
}