google-maps-реакции: "google.maps.drawing не определен" - PullRequest
Новая
       25

google-maps-реакции: "google.maps.drawing не определен"

0 голосов
/ 24 июня 2018

У меня есть веб-приложение, в котором есть две версии Карт, использующие модуль 'google-maps-реакции'.

Весь код будет доступен ниже.

Суть наличия двухВерсии (каждая в отдельном файле .js) - это то, что я хочу, чтобы одна страница показывала карту, как обычно, со всеми отображаемыми маркерами (также с использованием библиотеки мест) Full Map with all markers И еще одна страница, которая использует GoogleДиспетчер чертежей, без маркеров, который позволяет размещать новые маркеры или полигоны, которые станут доступны на полной карте (первая страница) после отправки на мой сервер.enter image description here

Теперь моя проблема заключается в том, что каждый раз, когда я нахожусь на первой странице и перехожу на вторые страницы, через пару секунд приложение вылетает с google.maps.drawingне определено.Но когда я запускаю приложение на второй странице, оно никогда не падает, независимо от того, сколько раз я переключаю страницы.

Я понятия не имею, почему это происходит, но я предполагаю, что это как-то связано с асинхронными событиями (???).

Может кто-нибудь сказать мне, почему это происходит и как это исправить?

PS: Если у кого-то есть лучший способ / идея сделать эти страницы, дайте мне знать.

ВРЕМЯ КОДА:

Карта с Диспетчером чертежей: 

/* global google */
import React from 'react';
import { Map, InfoWindow, GoogleApiWrapper } from 'google-maps-react';

class DrawingMap extends React.Component {

  constructor(props) {
    super(props);
    this.initMap = this.initMap.bind(this);
    this.state = {
      ...
    }
  }

  initMap(mapProps, map) {
    var self = this;
    const {google} = mapProps;

    const drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: null,
      drawingControl: false,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [
          google.maps.drawing.OverlayType.MARKER,
          google.maps.drawing.OverlayType.POLYGON
        ]
      },
      map: map
    });

  /*events and listeners and blah blah*/
  }

  render() {
    return (
      <Map google={this.props.google}
           onReady={this.initMap}
           onClick={this.onMapClicked}
           initialCenter={{...}}
           zoom={15}
           yesIWantToUseGoogleMapApiInternals >
      <InfoWindow
        visible={this.showingInfoWindow} >
      </InfoWindow>
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: key,
  libraries: ['drawing'],
  LoadingContainer: LoadingContainer
})(DrawingMap);

Карта без Диспетчера чертежей 

/* global google */
import React from 'react';
import { Map, Marker, Polygon, InfoWindow, GoogleApiWrapper } from "google-maps-react";

class FullMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ..
    }
  }

  initMap = (mapProps, map) => {
    var self = this;
    const { markers } = this.state;
    const {google} = mapProps;

    /* event listeners and whatnot */
  }

  render() {
    const {markers, zoom, activeMarker, activePolygon, mapCenter} = this.state;
    return (
      <Map google={this.props.google}
           onReady={this.initMap}
           initialCenter={{lat:mapCenter.lat, lng: mapCenter.lng}}
           center={{lat:mapCenter.lat, lng: mapCenter.lng}}
           zoom={14}
           streetViewControl={false}
           yesIWantToUseGoogleMapApiInternals>
      {markers && markers.map((marker, index) => marker && this.loadMarker(marker, index))}
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: key,
  libraries: ['places','geometry']
})(FullMap);
...