Как загрузить несколько маркеров на карте реагировать-Google-карты

Question

Застрял с этим в течение долгого времени.Пожалуйста, помогите мне с решением.Попытка загрузить несколько маркеров на карту, но по какой-то причине она не загружает все из них.Я использую React с оберткой Google Maps Api от tomchentw https://tomchentw.github.io/react-google-maps/#introduction

Он загружает только первый маркер без каких-либо ошибок.Я думаю, что это может быть что-то с итерацией маркеров, но не могу найти недостаток ..

.App

render() {
return (
  <div>
    <Map
      center={{ lat: 40.6451594, lng: -74.0850826 }}
      zoom={10}
      city={[places]}
    />

  </div>
);
}

.Map

import React from 'react';
import { withGoogleMap, GoogleMap, withScriptjs, Marker, InfoWindow } from "react-google-maps";
import { compose, withProps, withStateHandlers } from 'recompose';

const MapWithPlaces = compose(
withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: '100vh', width: '100%' }} />,
    mapElement: <div style={{ height: '100%' }} />,
}),
withStateHandlers(() => ({
    isOpen: false,
}), {
        onToggleOpen: ({ isOpen }) => () => ({
            isOpen: !isOpen,
        })
    }),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
    defaultZoom={props.zoom}
    defaultCenter={props.center}
    defaultOptions={{ ... }}>
    {props.places && props.places.map((place, i) => {
        let lat = parseFloat(place[i].latitude, 10);
        let lng = parseFloat(place[i].longitude, 10)

        return (
            <Marker
                id={place[i].id}
                key={place[i].id}
                position={{ lat: lat, lng: lng }}
                title="Click to zoom"
                onClick={() => { props.onToggleOpen({ i }); }}
            >
                {props.isOpen[{ i }] &&

                    <InfoWindow onCloseClick={props.onToggleOpen({ i })}>
                        <div>
                            {place.name}
                        </div>
                    </InfoWindow>
                }
            </Marker>
        )
    })}

</GoogleMap>
);

const customStyled = require('../mapStyle.json');

export default MapWithPlaces;

.place.json

[
{
    "id": 1,
    "name": "Park Slope",
    "latitude": "40.6710729",
    "longitude": "-73.9988001"
},
{
    "id": 2,
    "name": "Bushwick",
    "latitude": "40.6942861",
    "longitude": "-73.9389312"
},
{
    "id": 3,
    "name": "East New York",
    "latitude": "40.6577799",
    "longitude": "-73.9147716"
},
]

Заранее спасибо.

Answer 1

Существует несколько проблем с привязкой. places свойство

<Map
      center={{ lat: 40.6451594, lng: -74.0850826 }}
      zoom={10}
      city={[places]}
      ^^^^^^^^^^^^^^
    />

1) кажется опечаткой, вы, вероятно, имели в виду places имя свойства вместо city, верно?

2) и еще один момент, когда выражение {[places]} оценивает свойства объекта nested array (вот почему маркер отображается только один раз):

[
    [
        {
            "id": 1,
            "name": "Park Slope",
            "latitude": "40.6710729",
            "longitude": "-73.9988001"
        },
        {
            "id": 2,
            "name": "Bushwick",
            "latitude": "40.6942861",
            "longitude": "-73.9389312"
        },
        {
            "id": 3,
            "name": "East New York",
            "latitude": "40.6577799",
            "longitude": "-73.9147716"
        }
    ]
]

С некоторыми изменениями здесь рабочая демонстрация .