reactjs - NavigationControl 中的旋转控制在 react-map-gl 中不起作用
问题描述
我遇到了旋转控制不适用于 react-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>
);
}
}
解决方案
推荐阅读
- javascript - 可导航表中的过滤行
- java - 在 Lucene 搜索引擎中使用自建方法
- permissions - 将文件夹 + 子文件夹 + 内部文件的访问权限和所有权从一个文件夹复制到另一个文件夹(递归)
- mysql - 使用 node.js 和 aws lambda 将 Alexa 技能连接到 mysql 数据库
- javascript - 通过比较子属性(打字稿)从数组中删除“重复”对象
- list - Sharepoint 在线列表创建文件夹并在其中插入项目
- google-apps-script - 如何使用 onChange 事件通过 Google Sheets Apps 脚本检测已删除的工作表
- c# - 从字符串中删除空元素
- python - Python:将元组 w 列表转换为 csv
- java - 选择酒瓶的所有可能方式的回溯解决方案