Reaccionar para el mapa de Google Api

Obtuve el requisito de usar React y Google Maps para mostrar las capas de tráfico, bicicletas y tránsito usando la API de Google. Hice una investigación rápida sobre la biblioteca personalizada disponible (enumerada a continuación) pero no pude encontrar ninguna para lograr lo mismo.

  • google-maps-react
  • reaccionar-google-maps
  • reaccionar-google-maps-api

Luego intenté usar la API JS del mapa de Google para poder extender la solución de la forma que quisiera y después de eso no dependeré de las bibliotecas personalizadas. El código fuente se puede descargar desde el repositorio de github reaccionar-google-mapa.

Primero creó un componente de mapa que toma id, opciones y devolución de llamada onMapLoaded. Un punto importante a tener en cuenta aquí es que el archivo JS se carga a pedido. Hay otra biblioteca de reacción de terceros disponible como reaccionar-cargar-script que también se puede usar, pero en este ejemplo estoy usando un script simple de Java para lograr lo mismo. Otra buena publicación sobre el script de carga dinámica está disponible aquí.

Mapa.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 = `https://maps.google.com/maps/api/js?key=AIzaSyAyesbQMyKVVbBgKVi2g6VX7mop2z96jBo`;
      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;

Ahora el mapa se puede trazar simplemente al incluir esto en App.js

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

El requisito era agregar capas al mapa trazado en función del evento de clic del botón. Entonces, en la devolución de llamada de handleLayer, tengo una capa de configuración en el mapa trazado. El código completo se verá así.

Aplicación.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;

Hemos terminado aquí. Ahora ejecute la aplicación por npm start y haga clic en el botón en la parte superior del mapa.

Capa de tránsito:

2.JPG

Capa de tráfico:

3.JPG

Capa ciclista:

4.JPG

Similar Posts

Leave a Reply

Your email address will not be published.