Как добавить несколько маркеров на карту, используя response- google-maps - PullRequest
Новая
       21

Как добавить несколько маркеров на карту, используя response- google-maps

0 голосов
/ 12 февраля 2020

Я использую response- google-maps для интеграции карт Google в мое приложение. В настоящее время я добавил 1 маркер на свою карту с помощью информационного окна. То, что я хочу сделать, это добавить 3 разных маркера на карту, с различной информацией в информации windows при нажатии. Ниже приведен код для моей карты. Каков наилучший способ добиться этого? 

import React, { Component } from "react";
import { Map, Marker, GoogleApiWrapper, InfoWindow } from "google-maps-react";
import './App.css'

const style = {
  width: '100%',
  height: '92%',
};

export class MapContainer extends Component {
  constructor() {
    super();
    this.state = {
      showingInfoWindow: false,
      activeMarker: {},
      selectedPlace: {},
      mapLoaded: false
    };
    this.handleMapIdle = this.handleMapIdle.bind(this);
    this.onMarkerClick = this.onMarkerClick.bind(this);
    this.onClose = this.onClose.bind(this);
  }

  onMarkerClick = (props, marker, e) => {
    this.setState(prevState => ({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    }));
  };

  onClose = () => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  };

  onMarkerMounted = element => {
      console.log(element.marker)
    this.onMarkerClick(element.props, element.marker, element);
  };

  handleMapIdle = () => {
    this.setState({
      mapLoaded: true
    });
  };

  render() {
    return (    
      <Map
        google={this.props.google}
        style={style}
        initialCenter={{ lat: 1111, lng: 1111 }}
        zoom={this.props.zoom}
        onIdle={this.handleMapIdle}
      >
        {this.state.mapLoaded && (
          <Marker ref={this.onMarkerMounted} onClick={this.onMarkerClick} />
        )}
        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
          <div>Gasolautomat</div>
          <a href="InventoryStatus">Klicka här för lagerstatus</a>
        </InfoWindow>
      </Map>
    );
  }
}

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