Question

我有一个Web应用程序，该应用程序使用“ google-maps-react”模块提供两个版本的地图。

下面将提供所有代码。

具有两个版本（每个版本都在一个单独的.js文件中）的要点是，我希望有一个页面像往常一样显示地图，并显示所有标记（还使用了places库），而另一页面页面，该页面使用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);

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

0 个答案: