google-maps-react 中未显示标记

Question

我想显示一张带有标记的简单地图。

这是我的代码：

import React, { Component } from 'react';
import {Map, Marker, GoogleApiWrapper} from 'google-maps-react';
import demoFancyMapStyles from "./MapStyle.json";

export class MapContainer extends Component {
  propTypes: {
      currentPosLat: React.PropTypes.string.isRequired,
      currentPosLon: React.PropTypes.string.isrequired
  }

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Map google={this.props.google}
                zoom={14}
                options={{ styles: demoFancyMapStyles }}
                center={{ lat: this.props.currentPosLat, lng: this.props.currentPosLon }}>

        <Marker position={{lat: this.props.currentPosLat, lon: this.props.currentPosLon}} />

      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ("[myApiKey]")
}) (MapContainer)

地图渲染良好，甚至将中心设置为我当前的位置。但是，标记未显示在地图上。我尝试为标记设置自定义图标，但这没有任何改变。

每当我尝试像这样使用 this approach in step 1 时：

import {GoogleMap, Marker, GoogleApiWrapper} from 'google-maps-react';
[...]
<GoogleMap
        defaultZoom={14}
        defaultOptions={{ styles: demoFancyMapStyles }}
        defaultCenter={{ lat: this.props.currentPosLat, lng: this.props.currentPosLon }}>

  <Marker position={{lat: this.props.currentPosLat, lon: this.props.currentPosLon}} />

</GoogleMap>
[...]

我收到此错误：

Error: Element type is invalid: expected a string (for built-in 
components) or a class/function (for composite components) but got: 
undefined. You likely forgot to export your component from the file 
it's defined in, or you might have mixed up default and named imports.

Check the render method of `MapContainer`.

哪种方法更好，我哪里做错了？

Answer 1

我想你混淆了 2 个包。您所指的 google-maps-react 没有 GoogleMap 组件，但您正在尝试导入它：

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

此外，您提供的示例 link 指的是 react-google-maps 包。所以，我觉得你肯定把两者搞混了。

google-maps-react 中未显示标记

Marker not shown in google-maps-react

javascript

google-maps

reactjs

react-google-maps