Поместите маркер с помощью ReactMapGL Geocoder Result - PullRequest
Новая
       59

Поместите маркер с помощью ReactMapGL Geocoder Result

0 голосов
/ 05 августа 2020

У меня есть простое приложение для реагирования, которое использует ReactMapGL и ReactMapGL-Geocoder для отображения карты, позволяет пользователю искать местоположение с помощью геокодера и go этого найденного местоположения. Все это отлично работает с приведенным ниже кодом, но я хочу поставить маркер на результат, когда я go к нему. Я думаю, мне нужно использовать свойство геокодера onResults, но, возможно, это должно быть onResult. Разница между ними не ясна в документации, и я могу найти только простой пример в Интернете. Что нужно в go в функции handleOnResults ниже, чтобы разместить маркер, когда результат выбран из геокодера? Обратите внимание, что в целях безопасности я удалил свой токен доступа к mapbox ниже. 

import React from 'react';
import ReactMapGL, { Marker } from 'react-map-gl';
import Geocoder from 'react-map-gl-geocoder';
import './App.css';
import 'mapbox-gl/dist/mapbox-gl.css'
import 'react-map-gl-geocoder/dist/mapbox-gl-geocoder.css';

const MBAccessToken = 'Your access token here';

class App extends React.Component {
  state = {
    viewport: {
      width: '100vw',
      height: '100vh',
      latitude: 40.7250863,
      longitude: -73.9773608,
      zoom: 13
    }
  };

  map_ref = React.createRef();

  handleViewportChange = viewport => {
    this.setState({
      viewport: { ...this.state.viewport, ...viewport }
    });
  };

  handleGeocoderViewportChange = viewport => {
    const geocoderDefaultOverrides = { transitionDuration: 1000 };

    return this.handleViewportChange({
      ...viewport,
      ...geocoderDefaultOverrides
    });
  };

  handleOnResults = (event) => {
                                               // What goes in this function?
  }

  render() {
    return (
      <div>
        <ReactMapGL
          ref={this.map_ref}
          {...this.state.viewport}
          mapStyle='mapbox://styles/mapbox/streets-v11'
          mapboxApiAccessToken={MBAccessToken}
          onViewportChange={this.handleViewportChange}
        >
          <Geocoder
            mapRef={this.map_ref}
            mapboxApiAccessToken={MBAccessToken}
            position='top-left'
            onViewportChange={this.handleGeocoderViewportChange}
            viewport={this.state.viewport}
            onResults={this.handleOnResults}
          />
        </ReactMapGL>
      </div>
    );
  }
}

export default App;
...