Javascript 难以从'导入搜索框；反应谷歌地图'；

的文档中说，您可以通过“react google maps”通过导入{SearchBox}导入SearchBox，但当我尝试给我一个错误，即

Warning:react.createElement:type不应为null、未定义、布尔或数字时，它似乎会打断我的页面。它应该是字符串（对于DOM元素）或ReactClass（对于复合组件）。

当我尝试将其导入时。不过，谷歌地图的其他功能似乎都能发挥作用

我的代码如下：

/* global google */
import _ from "lodash";

import {
  default as React,
  Component,
} from "react";

import Helmet from "react-helmet";

import {
  GoogleMapLoader,
  withGoogleMap,
  GoogleMap,
  Marker,
  SearchBox,
  InfoWindow,
} from "react-google-maps";

// mobx
import {observer} from 'mobx-react'
import {observable} from 'mobx'

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`,
};

/*
 * This is the modify version of:
 * https://developers.google.com/maps/documentation/javascript/examples/event-arguments
 */
const GettingStartedGoogleMap = withGoogleMap(props => (
  <GoogleMap
    ref={props.onMapMounted}
    defaultZoom={3}
    center={props.center}
    onBoundsChanged={props.onBoundsChanged}
    onClick={props.onMapClick}
  >
    <SearchBox
      ref={props.onSearchBoxMounted}
      bounds={props.bounds}
      controlPosition={google.maps.ControlPosition.TOP_LEFT}
      onPlacesChanged={props.onPlacesChanged}
      inputPlaceholder="Customized your placeholder"
      inputStyle={INPUT_STYLE}
    />
    ...
  </GoogleMap>
));

const Browse = observer(class Browse extends Component {

  constructor(props) {
    super(props)

    this.populateMap(this.props.properties);

    // this.state ONLY FOR vars, not for functions.
    // if i need to change state, use this.setState({})  
    this.state = observable({
      bounds: null,
      center: {
        lat: 25.363882,
        lng: -80.044922,
      },
      properties: this.props.properties,
      markers: [],
    });

    this.handleMapMounted = this.handleMapMounted.bind(this);
    this.handleMapClick = this.handleMapClick.bind(this);
    this.handleMarkerClick = this.handleMarkerClick.bind(this);
    this.handleBoundsChanged = this.handleBoundsChanged.bind(this);
    this.handleSearchBoxMounted = this.handleSearchBoxMounted.bind(this);
    this.handlePlacesChanged = this.handlePlacesChanged.bind(this);
  }

  didFinishLoadingMarkers(markers) {
    this.setState({markers: markers});
  }

  //... removed this code to make it all easier to read...

  // test

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

  handleSearchBoxMounted(searchBox) {
    this._searchBox = searchBox;
    console.log('handleSearchBoxMounted')
  }

  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;
    console.log('handlePlacesChanged')
    this.setState({
      center: mapCenter,
      markers,
    });
  }
  // end test

  render() {
    return (
      <div className='container-fluid full-height'>
        <div className='row full-height'>
          <div className='col-xs-6 full-height map-position'>
            <GettingStartedGoogleMap
              containerElement={
                <div style={{ height: `100%` }} />
              }
              mapElement={
                <div style={{ height: `100%`, position: `static` }} />
              }
              center={this.state.center}
              onMapMounted={this.handleMapMounted}
              onMapClick={this.handleMapClick}
              markers={this.state.markers}
              onMarkerClick={this.handleMarkerClick}
              onBoundsChanged={this.handleBoundsChanged}
              onSearchBoxMounted={this.handleSearchBoxMounted}
              bounds={this.state.bounds}
              onPlacesChanged={this.handlePlacesChanged}
            />
          </div>
          <div className='col-xs-6 full-height pull-right'>
            <h1>Browse All Properties</h1>
            {this.props.properties.map(function(property, i) {
              return (
                <div key={i}>
                  <a href={'housing_applications/' + property.id}>{property.name}</a>
                </div>
              )
            }, this)}
          </div>
        </div>
      </div>
    );
  }
})

export default Browse

ReactOnRails.register({ Browse });

/*全球谷歌*/
从“洛达斯”进口；
进口{
默认为React，
组成部分
}从“反应”；
从“反应头盔”导入头盔；
进口{
谷歌地图加载器，
用谷歌地图，
谷歌地图，
标记，
搜索框，
信息窗口，
}从“谷歌地图反应”；
//莫布
从“mobx react”导入{observer}
从“mobx”导入{observable}
常量输入_样式={
框大小：`边框框'，
MozBoxSizing:`border box`，
边框：`1px实心透明`，
宽度：`240px`，
高度：`32px`，
marginTop:`27px`，
填充：`0 12px`，
边界半径：`1px`，
boxShadow:`0 2px 6px rgba（0,0,0,0.3）`，
fontSize:`14px`，
大纲：`无'，
textOverflow:`ellipes`，
};
/*
*这是的修改版本：
* https://developers.google.com/maps/documentation/javascript/examples/event-arguments
*/
const GettingStartedGoogleMap=withGoogleMap（道具=>(
...
));
const Browse=observer（类Browse扩展组件{
建造师（道具）{
超级（道具）
this.populateMap（this.props.properties）；
//此.state仅适用于变量，不适用于函数。
//如果需要更改状态，请使用此.setState（{}）
此状态=可观察({
界限：空，
中心：{
拉脱维亚：25.363882，
液化天然气：-80.044922，
},
属性：this.props.properties，
标记：[]，
});
this.handleMapMounted=this.handleMapMounted.bind（this）；
this.handlemaclick=this.handlemaclick.bind（this）；
this.handleMarkerClick=this.handleMarkerClick.bind（this）；
this.handleBoundsChanged=this.handleBoundsChanged.bind（this）；
this.handleSearchBoxMounted=this.handleSearchBoxMounted.bind（this）；
this.handlePlacesChanged=this.handlePlacesChanged.bind（this）；
}
DidFinishLoading标记（标记）{
this.setState（{markers:markers}）；
}
//…删除此代码以使其更易于阅读。。。
//试验
车把边缘{
这是我的国家({
bounds:this.\u map.getBounds（），
中心：此.\u map.getCenter（），
});
console.log（'handleBoundsChanged'）
}
手持搜索框安装（搜索框）{
这个.\u searchBox=searchBox；
console.log（'handleSearchBoxMounted'）
}
手语{
const places=this.\u searchBox.getPlaces（）；
//为从搜索栏返回的每个位置添加标记
const markers=places.map（place=>({
位置：place.geometry.location，
}));
//设置标记；将地图中心设置为第一个搜索结果
常量mapCenter=markers.length>0？标记[0]。位置：this.state.center；
console.log（'handlePlacesChanged'）
这是我的国家({
中心：地图中心，
标记，
});
}
//结束测试
render（）{
返回(
浏览所有属性
{this.props.properties.map（函数（属性，i）{
返回(
)
}，这个）}
);
}
})
导出默认浏览
register（{Browse}）；

谢谢

如今，SearchBox是这样的：

另请注意-您需要将

？libraries=places

添加到脚本导入中

这些天的搜索框是这样的：

---

另请注意-您需要将

？libraries=places

添加到脚本导入中

您可能错过了一些必需的导入。请检查本文件中使用的导入，以及。除此之外，这也可能有帮助。您可能错过了一些必需的导入。请检查本文件中使用的导入，以及。除此之外，这一相关信息也可能有所帮助。

import SearchBox from 'react-google-maps/lib/places/SearchBox'