用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);

我从这里的endpoint得到坐标

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

<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

您需要将position数组作为道具发送到组件，然后像下面这样呈现它们：

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}
/>)