使用 React 显示标记列表

Question

我正在尝试显示存储在我的 mongodb 数据库中的带有 lat 和 lng 的标记列表。 我正在使用 google-maps-react，这是我的子地图组件

import {
  Map,
  InfoWindow,
  Marker,
  GoogleApiWrapper,
  Polygon
} from 'google-maps-react';
import React, { Component } from 'react';
export class MapContainer extends Component {
  render() {
    const coords = this.props.initialCenter;
    const position = this.props.position;
    const paths = this.props.paths;
    const style = this.props.style;
    const center = this.props.center;
    console.log(this.props);
    return (
      <Map
        google={this.props.google}
        zoom={18}
        initialCenter={coords}
        style={style}
        center={center}
      >
        <Marker
          onClick={this.onMarkerClick}
          name={'Current location'}
          position={position}
        />
        <InfoWindow onClose={this.onInfoWindowClose}>
          <div>
            <h1>Test</h1>
          </div>
        </InfoWindow>
        <Polygon
          paths={paths}
          strokeColor='#0000FF'
          strokeOpacity={0.8}
          strokeWeight={2}
          fillColor='#0000FF'
          fillOpacity={0.35}
        />
      </Map>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_TEST
})(MapContainer);

我从这里的端点获取坐标

const centers = this.props.places.places.map(place => {
      return {
        lat: place.center[0],
        lng: place.center[1]
      };
    });

我试图像这样显示列表：

const position = { ...centers} ->什么都不做 //常量位置 = { lat: 41.53113384600326, lng: -8.619018495082855 }; -> 打印一个标记 //const position = center[0] -> 打印一个标记

我正在使用这样的子组件：

<MapContainer
          initialCenter={initialCenter}
          position={position}
          paths={paths}
          style={style}
          center={center}
        />

对此有什么帮助吗？

编辑：

子组件改为

<Marker
          onClick={this.onMarkerClick}
          name={'Current location'}
          position={{ position }}
        />

在父母身上：

中心在哪里：

<MapContainer
          initialCenter={initialCenter}
          paths={paths}
          style={style}
          center={center}
          position={centers.map(p => (
            <Marker
              onClick={() => this.onMarkerClick(p)}
              name={'Current location'} // You should probably have a "name" field for each positions
              position={p}
            />
          ))}
        ></MapContainer>

const centers = this.props.places.places.map(place => {
      return {
        lat: place.center[0],
        lng: place.center[1]
      };
    });

还没显示

Answer 1

您需要将位置数组作为道具发送给您的组件，然后像这样渲染它们：

this.props.positions.map(p => <Marker
  onClick={() => this.onMarkerClick(p)}
  name={'Current location'} // You should probably have a "name" field for each positions
  position={p}
/>)