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

Автор оригинала: DhananjayKumar.

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

Google-Maps-React
React-Google-Maps
React-Google-Maps-API

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

Сначала создал компонент карты, который принимает идентификатор, варианты и OnMapload Callback. Важно отметить здесь, что файл JS загружен по запросу. Есть другая 3-я библиотека React Party доступна как React-Load-Script которые также могут быть использованы, но в этом примере я использую простую сценарий Vanila Java для достижения того же. Еще один хороший пост на сценарий загрузки динамически доступно здесь Отказ

Map.cs.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 (
      
    );
  }
}

export default Map;

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

Требование было добавление слоев на нанесенную карту на основе кнопки Click Event. Так что в обратном вызове HandLayer у меня есть слой на карте на грани. Полный код будет выглядеть так.

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 (
      <>
        
        
        
        
              
       
    );    
  }
}

export default App;

Мы сделали здесь. Теперь запустите приложение по NPM Начните и нажмите на кнопку в верхней части карты.

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

Слой трафика:

Велосипедный слой:

Читайте ещё по теме: