Реагировать на карту Google API

Есть требование использовать React и карты Google для отображения слоев трафика, велосипедов и общественного транспорта с помощью API Google. Быстро изучил доступную пользовательскую библиотеку (перечисленную ниже), но не смог найти ничего подобного.

Google-карты-реагируют
реагировать-гугл-карты
реагировать-google-maps-api

Затем я попытался использовать Google Map JS API, чтобы я мог расширить решение так, как захочу, и после этого я не буду зависеть от пользовательских библиотек. Исходный код можно скачать из репозитория github. реагировать-гугл-карта.

Сначала создал компонент карты, который принимает идентификатор, параметры и обратный вызов onMapLoaded. Здесь важно отметить, что файл JS загружается по запросу. Доступны другие сторонние библиотеки реагирования, такие как скрипт загрузки реакции который также можно использовать, но в этом примере я использую простой ванильный java-скрипт для достижения того же. Доступен еще один хороший пост о скрипте динамической загрузки. здесь.

Map.cs

import React, { Component } from 'react';

class Map extends Component {
  constructor(props) {
    super(props);
    this.onScriptLoad = this.onScriptLoad.bind(this)
  }

  onScriptLoad() {
    const map = new window.google.maps.Map(document.getElementById(this.props.id),this.props.options);
    this.props.onMapLoad(map)
  }

  componentDidMount() {
    if (!window.google) {
      const script = document.createElement('script');
      script.type="text/javascript";
      script.src = `
      script.id = 'googleMaps';
      document.body.appendChild(script);
      script.addEventListener('load', e => {
        this.onScriptLoad()
      })
    } 
    else {
      this.onScriptLoad()
    }
  }

  render() {
    return (
      <div style={{ width: 500, height: 500 }} id={this.props.id} />
    );
  }
}

export default Map;

Теперь карту можно построить, просто включив это в App.js.

<Map id="myMap" options={{center: { lat: 51.501904, lng: -0.115871 }, zoom: 13}} 	onMapLoad = {this.handleMapLoad}/>

Требование состояло в том, чтобы добавить слои на нанесенную карту на основе события нажатия кнопки. Итак, в обратном вызове handleLayer у меня есть слой настройки на построенной карте. Полный код будет выглядеть так.

App.js

import Map from './Map';
import React from 'react';
import {Component} from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      map: {},
      traffic : {},
      transit : {},
      bicycling : {}
    }
  }

  handleMapLoad = (map) => {
    this.setState({
      map: map,
      traffic : new window.google.maps.TrafficLayer(),
      transit : new window.google.maps.TransitLayer(),
      bicycling : new window.google.maps.BicyclingLayer(),
    })
  }

  handleLayer = (layer) => {
    console.log(this.state.map);
    switch (layer) {
      case "traffic" : 
        this.state.transit.setMap(null);
        this.state.bicycling.setMap(null);
        this.state.traffic.setMap(this.state.map); 
        break;
      case "transit" :         
        this.state.bicycling.setMap(null);
        this.state.traffic.setMap(null); 
        this.state.transit.setMap(this.state.map);
        break;  
      case "bicycling" : 
        this.state.transit.setMap(null);
        this.state.traffic.setMap(null); 
        this.state.bicycling.setMap(this.state.map);
        break; 
      case "none" : 
        this.state.transit.setMap(null);
        this.state.traffic.setMap(null); 
        this.state.bicycling.setMap(null);  
        break;     
    }          
  }

  render() {
    return (
      <>
        <button onClick = {() => this.handleLayer("transit")}> Transit</button>
        <button onClick = {() => this.handleLayer("traffic")}> Traffic</button>
        <button onClick = {() => this.handleLayer("bicycling")}> Bicycling</button>
        <button onClick = {() => this.handleLayer("none")}> None</button>
        <Map
          id="myMap"
          options={{
            center: { lat: 51.501904, lng: -0.115871 },
            zoom: 13
          }}
          onMapLoad = {this.handleMapLoad}
        />      
       </>
    );    
  }
}

export default App;

Мы закончили. Теперь запустите приложение с помощью npm start и нажмите кнопку вверху карты.

Транзитный слой: