标记不适用于 google-map-react

Question

我正在使用 'google-map-react' 库，我已经尝试了所有方法，但标记没有出现。我以多种方式将坐标传递给标记，但 none 有效。这是我的代码和存储库：

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

const API_KEY = 'WTFULOOKINAT';

const contacts = [
  { name: 'Spiderman', lat: 41.529616, lng: 2.434130 },
  { name: 'Iron Man', lat: 41.528103, lng: 2.433834 },
  { name: 'Hulk', lat: 41.530192, lng: 2.422994 }
];

const MarkersC = (text ) => <div className="contact">{text}</div>;

export default class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      center: {
        lat: 41.528452,
        lng: 2.434195
      },
      zoom: 18
    }
  }


  render() {
    return (
      // Important! Always set the container height explicitly
      <div className="mt-5" style={{ height: '80vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: API_KEY }}
          defaultCenter={this.state.center}
          defaultZoom={this.state.zoom}
        >
            {contacts.map((contact,i) => {
            <MarkersC  position={{lat: contact.lat, lng: contact.lng}} text={contact.name} key={i} />
          })}

        </GoogleMapReact>
      </div>
    );
  }
}

我能做什么？感谢您的宝贵时间:)

Answer 1

如果您打开浏览器的控制台，您将看到一个错误。问题在于您的 MarkerC 组件以及您如何尝试获取 text 道具。

组件的参数是一个对象，具有传递给它的所有属性。

您不需要解构它来获得 text 您只需使用整个参数并尝试显示它。

所以你需要将它适当地解构为const MarkersC = ( {text} ) => ..

而不是

const MarkersC = ( text ) => <div className="contact">{text}</div>;

应该是

const MarkersC = ( {text} ) => <div className="contact">{text}</div>;

更新

刚注意到，google-map-react 期望在标记上找到 lat 和 lng 属性。您已将它们包裹在 position 属性中，因此无法找到它们。

所以你的用法应该是

任一

<MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} />

或展开包含这些属性的整个 contact 对象

<MarkersC {...contact} key={i} />

因此 lat、lng 和 text 都是 MarkersC 组件的直接属性。

Answer 2

存在格式问题。我删除了空格：

然后：

          {
            contacts.map((contact, i) => 
              <MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} />
            )
          }

现在：

          {
            contacts.map((contact, i) => <MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} /> )
          }

Answer 3

在您的问题中，您提供了无效的 GoogleMap 密钥，因此它在控制台中显示错误 Google Maps JavaScript API error: InvalidKeyMapError。

因此请提供有效的 GoogleMap 密钥或空白 (const API_KEY = '')，仅供开发使用。

在我使用空白 API_KEY 的情况下，它工作正常。

（您的 git 回购代码与您在 Whosebug 中发布的代码不同。）

Answer 4

在初始 'const' 上声明对象类型并直接引用 'text' 的值对我有用：

const AnyReactComponent = (text:any) => <div>{text.text}</div>;

标记不适用于 google-map-react

Markers not working with google-map-react

reactjs

api

google-maps

markers