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';

此外，您提供的示例的链接引用了react-google-maps软件包。因此，我觉得您绝对必须混淆两者。

标记未显示在google-maps-react

1 个答案: