標記未顯示在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)

地圖可以很好地渲染，甚至可以將中心設置為我的當前位置。 但是，標記未顯示在地圖上。 我嘗試為標記設置一個自定義圖標，但這並沒有改變。

每當我在步驟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';

另外，您提供的示例的鏈接引用了react-google-maps包。 因此，我覺得您絕對必須混淆兩者。