Реагируйте на Google Map: UL всех маркеров, связанных в GoogleMap, и соответствующее информационное окно по щелчку каждого пользователя. - PullRequest
Новая
       33

Реагируйте на Google Map: UL всех маркеров, связанных в GoogleMap, и соответствующее информационное окно по щелчку каждого пользователя.

0 голосов
/ 06 июня 2019
  1. Я создал карту Google со списком посредников, используя «act-google-maps "
  2. Маркеры правильно зациклены и отображаются на карте
  3. Как я могу также перечислить «Маркер» / «Торговые посредники» на Карте в список (UL). Также щелчок по списку (li) должен открыть информационное окно?

Это тот, который я использовал, https://gist.github.com/jwo/43b382fc60eb09d3a415c9953f4057f8

import React, { Component } from "react"
import { compose } from "recompose"
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow, Listing
} from "react-google-maps"
const MapWithAMarker = compose(withScriptjs, withGoogleMap)(props => {
  const listStyle = {
    width: '250px',
    position: "relative"
  }
  return (
    <div style={{ position: "relative" }}>
      <GoogleMap defaultZoom={4} defaultCenter={{ lat: 56.263920, lng: 9.501785 }}>
        {props.markers.map(marker => {
          if (marker.lat != null) {

            const onClick = props.onClick.bind(this, marker)
            return (
              <Marker
                key={marker.customerNumber}
                onClick={onClick}
                position={{ lat: parseFloat(marker.lat), lng: parseFloat(marker.lng) }}
              >
                {props.selectedMarker === marker &&
                  <InfoWindow>
                    <div>
                      <h1> {marker.name}</h1>
                      <br />
                      {marker.address}
                      <br />
                      {marker.zipcode} {marker.city}
                      <br />
                      Telephone: {marker.phone}
                    </div>
                  </InfoWindow>}

{/* List resellers here, so info window can be reused I guess, not sure */}
              </Marker>

            )
          }         
        })}
      </GoogleMap>

    </div>
  )
})
export default class ResellerGoogleMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showingInfoWindow: false,
      selectedMarker: {},
      selectedPlace: {}
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(marker, event) {
    console.log(this.props)
    this.setState({
      selectedMarker: marker
    });
  }

  render() {

    return (
      <div style={{ padding: "24px 13px 2px 2px" }}>
        <input type="button" value="My Location" style={{ marginBottom: "20px" }} onClick={(e) => this.onBtnClick()} />

        <MapWithAMarker
          selectedMarker={this.state.selectedMarker}
          markers={this.props.resellerData}
          onClick={this.handleClick}
          googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{ height: `100%`, padding: `61px 55px 55px 55px` }} />}
          containerElement={<div style={{ height: `800px` }} />}
          mapElement={<div style={{ height: `511px` }} />}
        />
      </div>
    );
  }
}

Ожидается

карта Google /
Маркеры «посредников» / Перечислите реселлеров в списке тоже / При нажатии на элемент списка должно появиться информационное окно, как когда мы нажимаем на Маркеры / Первые два пункта работают, Нужна рука на отдыхе, Пожалуйста, помогите кому-нибудь

1 Ответ

0 голосов
/ 06 июня 2019

Спасибо всем за ваше время, я нашел решение Просто мы можем добавить следующую строку кода сразу после тега закрытия информационного окна 

<a onClick={onClick}>{marker.name}</a>
...