1

我有一个使用“google-maps-react”模块有两个版本的地图的网络应用程序。

所有代码都将在下面提供。

有两个版本（每个版本都在一个单独的 .js 文件中）的意义在于，我想让一个页面像往常一样显示地图，并显示所有标记（也使用位置库）带有所有标记的完整地图和另一个使用谷歌绘图管理器的页面，没有标记，这允许您放置新的标记或多边形，这些标记或多边形在发送到我的服务器后将在完整地图（第一页）中可用。 在此处输入图像描述

现在我的问题是每次我在第一页并转到第二页时，几秒钟后应用程序因“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);
4

0 回答 0