Fehler beim Anzeigen von read-google-maps SearchBox

Question

Ich habe versucht, die Suchbox in react-google-maps (https://github.com/tomchentw/react-google-maps) zu verwenden. Ich folge nur dem Tutorial und kopiere einfach den Code. Hier ist, was ich versuche zu reproduzieren https://tomchentw.github.io/react-google-maps/places/search-box

Aber irgendwie bekomme ich diesen Fehler.Ich habe Stunden verbracht, um dies zu lösen, aber kein Ergebnis. Benötigen Sie ist

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Grid = require('semantic-ui-react').Grid; 
var Form = require('semantic-ui-react').Form; 
var Button = require('semantic-ui-react').Button; 
var Input = require('semantic-ui-react').Input; 
var Icon = require('semantic-ui-react').Icon; 

var withGoogleMap = require("react-google-maps").withGoogleMap; 
var GoogleMap = require("react-google-maps").GoogleMap; 
var SearchBox = require('../../node_modules/react-google-maps/src/lib/places/SearchBox'); 

const SearchBoxExampleGoogleMap = withGoogleMap(props => (


<GoogleMap 
    ref={props.onMapMounted} 
    defaultZoom={15} 
    center={props.center} 
    onBoundsChanged={props.onBoundsChanged} 
    > 
    <SearchBox 
     ref={props.onSearchBoxMounted} 
     bounds={props.bounds} 
     controlPosition={google.maps.ControlPosition.TOP_LEFT} 
     onPlacesChanged={props.onPlacesChanged} 
     inputPlaceholder="Customized your placeholder" 
     inputStyle={INPUT_STYLE} 
    /> 
    {props.markers.map((marker, index) => (
     <Marker position={marker.position} key={index} /> 
    ))} 
    </GoogleMap> 
)); 

const INPUT_STYLE = { 
    boxSizing: `border-box`, 
    MozBoxSizing: `border-box`, 
    border: `1px solid transparent`, 
    width: `240px`, 
    height: `32px`, 
    marginTop: `27px`, 
    padding: `0 12px`, 
    borderRadius: `1px`, 
    boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`, 
    fontSize: `14px`, 
    outline: `none`, 
    textOverflow: `ellipses`, 
}; 

class MapEditor extends React.Component { 

    constructor(props){ 
     super(); 
     this.state = { 
      bounds: null, 
      center: { 
       lat: 47.6205588, 
       lng: -122.3212725, 
      }, 
      markers: [], 
     }; 

     this.handleMapMounted = this.handleMapMounted.bind(this); 
     this.handleBoundsChanged = this.handleBoundsChanged.bind(this); 
     this.handleSearchBoxMounted = this.handleSearchBoxMounted.bind(this); 
     this.handlePlacesChanged = this.handlePlacesChanged.bind(this); 

    } 

    handleMapMounted(map) { 
     this._map = map; 
    } 

    handleBoundsChanged() { 
     this.setState({ 
      bounds: this._map.getBounds(), 
      center: this._map.getCenter(), 
     }); 
    } 

    handleSearchBoxMounted(searchBox) { 
     this._searchBox = searchBox; 
    } 

    handlePlacesChanged() { 
     const places = this._searchBox.getPlaces(); 

     // Add a marker for each place returned from search bar 
     const markers = places.map(place => ({ 
      position: place.geometry.location, 
     })); 

     // Set markers; set map center to first search result 
     const mapCenter = markers.length > 0 ? markers[0].position : this.state.center; 

     this.setState({ 
      center: mapCenter, 
      markers, 
     }); 
    } 

    render() { 
     console.log(SearchBox); 
     return (
      <div style={{height: `400px`}}> 
       <SearchBoxExampleGoogleMap 
        containerElement={ 
         <div style={{ height: `100%` }} /> 
        } 
        mapElement={ 
         <div style={{ height: `100%` }} /> 
        } 
        center={this.state.center} 
        onMapMounted={this.handleMapMounted} 
        onBoundsChanged={this.handleBoundsChanged} 
        onSearchBoxMounted={this.handleSearchBoxMounted} 
        bounds={this.state.bounds} 
        onPlacesChanged={this.handlePlacesChanged} 
        markers={this.state.markers} 
       /> 
      </div> 
     ); 
    } 
} 

module.exports = MapEditor; 

Answer 1

Das ist für mich mein Code Und hier

Leute helfen funktioniert.

var SearchBox = require('../node_modules/react-google-maps/lib/places/SearchBox').default; 

Ich hatte auch google.maps.ControlPosition.TOP_LEFT-window.google.maps.ControlPosition.TOP_LEFT

Relevant zu ändern, warum der Import nicht funktioniert: Can't require() default export value in Babel 6.x