Маркер по умолчанию как компонент функции - PullRequest
Новая
       24

Маркер по умолчанию как компонент функции

0 голосов
/ 14 апреля 2019

Используя эту Google Map lib , по этой ссылке я могу создать маркер по умолчанию на карте.Однако это onGoogleApiLoaded () будет запущено только один раз.Я хотел всегда центрировать маркер на карте.Но для маркера по умолчанию требуется минимальная позиция, поэтому я пытаюсь создать маркер по умолчанию как функцию и передать в него новую позицию, но не могу заставить его работать.

У меня есть основной компонент, который будет отображать компонент MapContainer. 

Main.js:

const { defaultCenter, defaultZoom, div_Height, div_Width, newCenter } = this.state;

return(
        <div style={{width: 500, height: 100}}>
            <div>          
                <MapContainer
                defaultCenter={defaultCenter}
                defaultZoom={defaultZoom}
                onChange={this.onChange}
                onClick={this.onClick}
                div_Height={div_Height}
                div_Width={div_Width}
                newCenter={newCenter}>

                </MapContainer>
            </div>
        </div>

    );

и функция onChange для получения новых координат центра. 

onChange(center){
    let {newCenter} = this.state;
    newCenter = center.center;
    this.setState({newCenter})
}

В моем MapContainerдля рендеринга GoogleMap: 

MapContainer:

const { defaultCenter, defaultZoom, onChange, onClick} = this.props;
let {newCenter} = this.props
const {apiReady, map, maps} = this.state;

return (
  // Important! Always set the container height explicitly
  <div style={{height: '100vh', width: '100%' }}>
    <GoogleMapReact
      /*bootstrapURLKeys={{ key: 'key' }}*/
      defaultCenter={defaultCenter}
      defaultZoom={defaultZoom}
      yesIWantToUseGoogleMapApiInternals={true}
      onGoogleApiLoaded={({map, maps}) => this.apiLoaded(map, maps)} 
      onClick={onClick}
      onChange={onChange}
    >
    {apiReady ? <Marker map={map} maps={maps} newCenter={newCenter}/>: null}
    </GoogleMapReact>
  </div>
);

onGoogleApiLoaded func для установки карты, карты: 

apiLoaded(map, maps) {
if (map && maps) {
 this.setState({
   apiReady: true,
   map: map,
   maps: maps
 });
 }}

И, наконец, способ создания маркера: 

const Marker = (props) => {
  return (new props.maps.Marker({
    position: props.newCenter,
    map: props.map
  }));   
}

Ошибка, которую я получаю: Нарушение инварианта: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {__gm, gm_accessors_, позиция, gm_bindings_, карта, closure_uid_621320123, clickable, visible}).Если вы хотите визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

Есть идеи?

...