google-maps-react：“未定義 google.maps.drawing”

Question

我有一個使用“google-maps-react”模塊有兩個版本的地圖的網絡應用程序。

所有代碼都將在下面提供。

有兩個版本（每個版本都在一個單獨的 .js 文件中）的重點是我希望有一個頁面像往常一樣顯示地圖並顯示所有標記（也使用位置庫） 另一個頁面使用 Google 的繪圖管理器，沒有標記，允許您放置新的標記或多邊形，這些標記或多邊形在發送到我的服務器后將在完整地圖（第一頁）中可用。

現在我的問題是每次我在第一頁並轉到第二頁時，幾秒鍾后應用程序因“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);

Answer 1

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

===>繪圖控制：真

Answer 2

您只需將繪圖添加到您的庫數組中，返回的地圖上就會有繪圖道具。