Как добавить параметры фильтра в Google-maps -react? - PullRequest
Новая
       15

Как добавить параметры фильтра в Google-maps -react?

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

Я хочу иметь возможность загружать маркеры, соответствующие каждому из 3 флажков (магазин, еда, проживание) над картой Google, когда я установил флажок. В настоящее время я знаю, как загрузить все файлы 3 json за один go. Как добавить в функцию фильтрации флажок? Я попытался поиграть с обработкой события onClick, но безрезультатно.

app. js

import React, { Component } from 'react';
import './App.css';
import { Button, ButtonToolbar} from 'react-bootstrap';
import shop from "./stores.json"
import food from "./fnbs.json"
import stay from "./stay.json"
import Customers from './Customers'
import { BrowserRouter as Router, Switch, Route, Redirect} from 'react-router-dom';
import { Map, Marker, GoogleApiWrapper, InfoWindow, Polygon } from 'google-maps-react';

class App extends Component {
  constructor(props){
    super(props);

    this.state={
      showingInfoWindow:false,
      activeMarker:{},
      selectedPlace:{}
    }
  }

  // show infowindow when the marker is clicked
  onMarkerClick = (props, marker, e) =>
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true,
    });

  // close infowindow when the user clicks on the close button 
  onClose = props => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  };

  // display markers
  displayMarkers= (poi) =>{
    return poi.map((poi,index) => {
      return <Marker Key={index} id={index} position={{
        lat: poi.latitude,
        lng: poi.longitude,
      }}
      onClick={this.onMarkerClick}
      name={poi.name}/>
    })
  }

    render() {
    console.log("Host URL"+process.env.PUBLIC_URL);

    return (

      <Router basename={process.env.PUBLIC_URL}>
        <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Little India!</h1>
        </header>

        <div id='map'>
          <Map
          google={this.props.google}
          zoom={14}
          style={mapStyles}
          initialCenter={{ lat: this.state.currentLocation.lat, lng: this.state.currentLocation.lng}}
          > 

          <Polygon
                path={triangleCoords}
                strokeColor="#0000FF"
                strokeOpacity={0.8}
                strokeWeight={2}
                fillColor="#0000FF"
                fillOpacity={0.35}
              />

          {this.displayMarkers(stores)}

          <Marker onClick={this.onMarkerClick} name={'current location'} />

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

          <Switch>
                <Route exact path= "/" render={() => (
                  <Redirect to="/customerlist"/>
                )}/>
                 <Route exact path='/customerlist' component={Customers} />
          </Switch>
      </div>
    </Router>
    );
  }
}

остаться. json

[
    {
      "id": 1,
      "name": "Park Slope",
      "latitude": "40.6710729",
      "longitude": "-73.9988001"
    },
    {
      "id": 2,
      "name": "Bushwick",
      "latitude": "40.6942861",
      "longitude": "-73.9389312"
    },
    {
      "id": 3,
      "name": "East New York",
      "latitude": "40.6577799",
      "longitude": "-73.9147716"
    }
  ]

Для вашей информации текущий код может загрузить несколько POI только тогда, когда я жестко закодировал его, указав точный файл, который я импортировал (например, {this.displayMarker {food}}), но обнаружил сообщение об ошибке, говорящее, что моя переменная POI не определена (например, poi = {stores} then {this.displayMarker {poi}}). Я тоже не уверен, почему.

Спасибо. Любой совет будет высоко ценится.

...