Маркеры и список реагирования Карт Google - PullRequest
Новая
       10

Маркеры и список реагирования Карт Google

0 голосов
/ 16 октября 2018

Мне было интересно, использовал ли кто-нибудь библиотеку google-maps-реагировать для создания маркеров и элементов списка.У меня есть компонент карты, который отображает окно карты, маркеров и информации.У меня также есть другой компонент, который имеет все списки (li) мест, которые представляют значение каждого маркера.Можно ли как-нибудь щелкнуть по элементу списка и вызвать соответствующее событие щелчка Маркера?

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Полагаю, вы имеете в виду google-maps-react библиотека , верно?Допустим, у вас есть компонент для выбора адреса: 

const CityList = props => {
  return (
    <div>
      <ul>
        {props.items.map((item, index) => {
          return (
            <li key={index} onClick={e => props.onClick(e, item)}>
              {item.title}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

Затем вы можете ввести выбранное значение в качестве состояния и обновить состояние после щелчка по элементу списка адресов.Обновление состояния вызовет повторное рендеринг компонента Map: 

class App extends Component {
  state = {
    selectedItem: { lat: 0, lng: 0 }
  };

  showInfo(e, selectedItem) {
    this.setState({ selectedItem: selectedItem });
  }

  render() {
    return (
      <div>
        <CityList items={data} onClick={this.showInfo.bind(this)} />
        <MapContainer
          center={{ lat: -24.9923319, lng: 135.2252427 }}
          zoom={4}
          data={data}
          selectedItem={this.state.selectedItem}
        />
      </div>
    );
  }
}

Вот демо для вашей справки

0 голосов
/ 17 октября 2018

Если в Списке хранится информация о ваших Маркерах, вам нужно поднять состояние, когда вы пытаетесь общаться от Ребенка к Родителю.Таким образом, в идеале позиции маркеров находятся как в родительской, так и в вызываемой функции (в вашем случае Map).И вы вызываете его из своего элемента списка, передавая функцию через реквизиты компоненту List следующим образом: 

<List handleMarkers={this.function}/>

Доступ к функции в дочернем элементе осуществляется через this.props.handleMarkers.

...