时间戳

首页 > 解决方案 > 选择中的选项 - 方法调用

javascript - 选择中的选项 - 方法调用

问题描述

在选择中选择一个选项后，如何使方法工作？具体来说，我在每个选项（名称、描述、x、y）中都存储了名称、描述 - 带有描述的名称显示在弹出窗口中 x、y - 将出现在地图上的标记的坐标。

这里我有“历史”机制：

state = {
    Name: '',
    Description: '',
    X: '',
    Y: '',
    elements: [],
    history: [],
    currentHistoryIndex: 0
}

 // tutaj zapisujemy wpisy w historii
  handleOnHistoryPush = () => {
    this.setState({ history: ([...this.state.history, this.state.elements]) });
    this.setState({ elements: ([]) });
  };
  // dodajemy kolejny element do aktualnych elementów
  appendElement = (Name, Description, X, Y) => this.setState({ elements: ([...this.state.elements, { Name, Description, X, Y }]) });
render(){
return(
<div ref={el => this.mapContainer = el}' ></div>
<input
              value={this.state.Name}
              onChange={e => this.setState({
                Name: e.target.value
              })}
            />
<input
              value=Description
              onChange={e => this.setState({
                Description:e.target.value
              })}
            />
<input
              value={this.state.X}
              onChange={e => this.setState({
                X: e.target.value
              })}
            />
<input
              value={this.state.Y}
              onChange={e => this.setState({
                Y: e.target.value
              })}
            />

<div style={{ display: 'flex', flexDirection: 'row' }}>
          <div>
            Wpisy<br />
            <button onClick={() => this.appendElement(this.state.Name, this.state.Description, this.state.Y, this.state.X)}>Dodaj</button>
            <button onClick={this.handleOnHistoryPush}>Zapisz</button>
            <ul>
              {this.state.elements.map(element => (

                <p>{`Nazwa: ${element.Name} opis: ${element.Description} X: ${element.X} Y: ${element.Y} `}</p>

              ))}
            </ul>
          </div>
          <div>
            Historia<br />
            <select onChange={event => this.setState({ currentHistoryIndex: event.currentTarget.value })}>
              {
                this.state.history.map((_, index) => <option key={index} value={index}>{index}</option>)
              }
            </select>
            {this.state.history[this.state.currentHistoryIndex] && (
              <ul>
                {this.state.history[this.state.currentHistoryIndex].map(historyRecord => <p>{`${historyRecord.Name} ${historyRecord.Description} ${historyRecord.Y} ${historyRecord.X}`}</p>)}
              </ul>
            )}
          </div>
        </div>
)
}

在每个选项中都有数据，我想要，例如，将按选项编号 1 的用户在地图上具有选项编号 1，例如有 3 个点 (x, y) 将在地图上显示这 3 个标记。这里我有一个显示这些点的书面方法，我现在不知道如何连接它：

 const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [50, 100],
      zoom: 10,
    })
for (var i = 0; i < this.state.history[currentHistoryIndex].length; i++) {
      var obj = this.state.items[i];
      let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
      new mapboxgl.Marker()
        .setLngLat(myLatlng)
        .addTo(map);
    }

标签： javascriptreactjsmapbox

解决方案

与此示例类似，您可以将 3 个选项添加到地图，将 EventListener 添加到选项选择事件：

<script>
	mapboxgl.accessToken = 'access_token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-77.04, 38.907],
zoom: 11.15
});
 
document
.getElementById('listing-group')
.addEventListener('change', function(e) {
var handler = e.target.id;
if (e.target.checked) {
map[handler].enable();
} else {
map[handler].disable();
}
});
</script>

而不是map[handler].enable();你可以设置你的标记的位置marker.setLngLat([Lng, Lat])。如果您只想一次显示 1 个标记，您可以在加载地图后创建标记，然后使用marker.setLngLat([Lng, Lat])函数更改位置。

推荐阅读