google-map-react：元素类型无效：需要一个字符串答案

【问题标题】：google-map-react: Element type is invalid: expected a stringgoogle-map-react：元素类型无效：需要一个字符串
【发布时间】：2018-09-14 08:46:52
【问题描述】：

如果我使用标记标记，那么我的组件将无法正常工作，并且会引发类似这样的错误

我的代码是：

import React, { Component } from 'react';
import GoogleMap, { Marker } from 'google-map-react';

class Maps extends Component {
  static defaultProps = {
    center: {lat: 22.741033, lng: 81.102441},
    zoom: 5
  };
  render() {
    return (
      <GoogleMap
        bootstrapURLKeys={{ key: ['AIzaSyAA1WZznnpeoP6hZz26UiARGNOhZhYLZek'] }}
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{height: '300px'}}
      >
      <Marker
        position={this.props.center}
      />
      </GoogleMap>
    );
  }
}

export default Maps;

【问题讨论】：

大多数情况下，这意味着您导入了错误的组件（仅供参考）
ok如何导入marker组件@corvid

标签： javascript reactjs google-maps google-maps-markers google-map-react

【解决方案1】：

这似乎是导出组件的问题。我认为GoogleMap 默认情况下不会在react-google-maps 中导出。尝试将其作为组件导入。

import { GoogleMap, Marker } from "react-google-maps";

您可能还想看看react-google-map 中的withGoogleMap 组件。

在下面添加我的示例代码

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";

const MapWithAMarker = withGoogleMap(props => {
    return (
        <GoogleMap defaultZoom={12}  defaultCenter={{ lat: props.marker.lat, lng: props.marker.lng }}>
            {props.marker &&
                <Marker label={props.marker.name}  position={{ lat: props.marker.lat, lng: props.marker.lng }} />
            }
        </GoogleMap>
    );
});

export default class Map extends Component {
    render() {
        const { marker } = this.props;

        return (
            <MapWithAMarker marker={marker} containerElement={<div className="mapContainer full-flex" />} mapElement={<div className="map" />} />
        );
    }
}

Map.propTypes = {
    marker: PropTypes.object
};

【讨论】：

哦，对不起，我的错。无论如何，我没有在this library 中看到任何可用的组件 naemd Marker，我希望我是正确的。您确定默认情况下可以使用 MArker 组件吗？他们所有的例子似乎都使用了自定义组件。
好的，Np，但您的解决方案对某人有用，谢谢。 @Noushad PP
np ，您可以发布另一个答案。请不要更改以前的答案，这可能对某人有帮助。@Noushad PP

【解决方案2】：

似乎google-map-react 没有导出名为Marker 的组件您可以按照他们的示例使用您的自定义组件here

【讨论】：