Я пытаюсь нумеровать свои маркеры и показывать InfoWindow с помощью google-maps-реакции - PullRequest
Новая
       28

Я пытаюсь нумеровать свои маркеры и показывать InfoWindow с помощью google-maps-реакции

0 голосов
/ 11 мая 2019

Кажется, я не могу показать индекс моего json для google-maps-реагировать, я вижу все отображенные маркеры, но они показывают маркер по умолчанию, но окно не выскочило. Вот код с размещенным <InfoWindow>, реагирует на то, что я должен поставить родительский div, когда я это делаю, я не вижу никаких маркеров в настоящее время.

Мой car2go json отображается правильно, но не печатает name={content.name}.

Мой компонент map.js: 

import React, { Component } from "react";
import Car2go from "../data/car2go/vehicles.json";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";

export class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.onMarkerClick = this.onMarkerClick.bind(this);
    this.state = {
      showingInfoWindow: false,
      activeMarker: {},
      selectedPlace: {},
      name: null
    };
  }
  onMarkerClick(props, marker, e) {
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });
  }
  render() {
    const google = window.google;
    const style = {
      width: "70%",
      height: "70%",
      margin: "0 auto"
    };
    //const google = window.google;
    return (
      <Map
        google={this.props.google}
        style={style}
        initialCenter={{
          lat: 53.59301,
          lng: 10.07526
        }}
        zoom={12}
        onClick={this.onMapClicked}
      >
        {Car2go.placemarks.map((content, index) => {
          return (
            <div>
              <Marker
                title={index}
                name={content.name}
                position={{
                  lat: content.coordinates[1],
                  lng: content.coordinates[0]
                }}
                onClick={this.onMarkerClick}
                name={content.name}
              />

              <InfoWindow
                marker={this.state.activeMarker}
                visible={this.state.showingInfoWindow}
              >
                <div>
                  <h1>{this.state.selectedPlace.name}</h1>
                </div>
              </InfoWindow>
            </div>
          );
        })}
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "xxxxx"
})(MapContainer);

1 Ответ

1 голос
/ 14 мая 2019

Я думаю, что React жалуется на ошибку, похожую на эту:

React не распознает mapCenter реквизит элемента DOM

Если это так, основная причина этой ошибки связана с переносом компонента Marker в контейнер div: 

<div>
    <Marker 
       ...  
    />
</div>

и способ google-maps-react Map компонента визуализации дочерних элементов . В этом случае реквизиты Map переносятся в элемент div вместо компонента Marker. Для более подробной информации см. Unknown Prop Warning article.

Чтобы обойти эту ошибку, можно рассмотреть следующий подход:

  • заменить div контейнер на React.Fragment
  • явно переносит реквизиты карты в Marker компонент

Вот пример: 

class Map extends Component {
  constructor() {
    super();
    this.state = {
      map: null
    };
    this.handleMapReady = this.handleMapReady.bind(this);
  }

  handleMapReady(mapProps, map) {
    this.setState({ map: map });
  }

  render() {
    return (
      <Map
        google={this.props.google}
        className={"map"}
        initialCenter={this.props.center}
        zoom={this.props.zoom}
        onReady={this.handleMapReady}
      >
        {this.state.map &&
          places.map((place, i) => {
            const mapProps = Object.assign({}, this.props);
            mapProps.map = this.state.map;
            return (
              <React.Fragment key={i}>
                <Marker
                  {...mapProps}
                  onClick={this.handleMarkerClick}
                  position={place.position}
                  placeIndex={i}
                  name={place.name}
                />
              </React.Fragment>
            );
          })}
      </Map>
    );
  }
}

Но вместо описанных выше изменений я бы предложил другой подход, в частности, создать отдельный экземпляр из InfoWindow компонента и управлять им, как показано ниже: 

<Map
    google={this.props.google}
    className={"map"}
    initialCenter={this.props.center}
    zoom={this.props.zoom}
  >
    {places.map((place, i) => {
      return (
        <Marker
          key={i}
          onClick={this.handleMarkerClick}
          position={place.position}
          placeIndex={i}
          name={place.name}
        />
      );
    })}
    <InfoWindow
      marker={this.state.activeMarker}
      visible={this.state.showingInfoWindow}
      onClose={this.handleClose}
    >
      <div>{this.state.selectedPlace.name}</div>
    </InfoWindow>
  </Map>

Вот демоверсия

...