Question

我一直在尝试在react-google-maps（https://github.com/tomchentw/react-google-maps）中使用searchbox。我只是按照教程，基本上只是复制并粘贴代码。这是我正在尝试重现https://tomchentw.github.io/react-google-maps/places/search-box

的内容

但不知怎的，我得到了这个错误。我花了好几个小时来解决这个问题但没有结果。需要帮助人员

这是我的代码

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

这对我有用。

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

我还必须将google.maps.ControlPosition.TOP_LEFT更改为window.google.maps.ControlPosition.TOP_LEFT

与导入无效的原因相关：Can't require() default export value in Babel 6.x

无法显示react-google-maps SearchBox

1 个答案: