Google-карта-реагировать заполнить несколько маркеров - PullRequest
Новая
       7

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

0 голосов
/ 09 ноября 2019

В настоящее время я пытаюсь заполнить мою карту Google маркерами с помощью функции карты. Я не могу получить что-либо для заселения. Есть ли ограничения, которые я не понимаю, или я что-то упускаю? Я попытался заменить FontAwesomeIcon на что-то более простое, но он не рендерится. Если вы копируете вставку FontAwesomeIcon несколько раз в компоненте GoogleMapReact, это, кажется, работает, но я не могу заставить его работать с картой. Любые предложения будут высоко ценится. 

render() {
        const {center, zoom} = this.props;

        const listingPins = this.props.testList.map((listing, index) => {
            console.log(listing);
            if (listing.coordinates.lat === null || listing.coordinates.lng === null){
                return null
            } else{
                return <FontAwesomeIcon icon={faHome} size={"2x"} key={index} listing={listing} lat={listing.coordinates.lat} lng={listing.coordinates.lat} />
            }
        });
        console.log("TEST");
        console.log(listingPins);

        return (
            <div style={{ height: '100vh', width: '100%' }}>
                <GoogleMapReact
                    bootstrapURLKeys={{ key: "key" }}
                    center={center}
                    zoom={zoom}
                >
                    {listingPins}
                </GoogleMapReact>
            </div>
        );
    }

1 Ответ

0 голосов
/ 09 ноября 2019

Чтобы отобразить несколько маркеров на карте, необходимо передать массив маркеров в компонент GoogleMapReact как дочерний элемент и отобразить его поверх. 

return (
        <div style={{ height: '100vh', width: '100%' }}>
          <GoogleMapReact>
             {props.listingPins.map(pin => (
               <Marker
                  position={{ lat: pin.latitude, lng: pin.longitude }}
                  key={pin.id}
               />
             ))}
          </GoogleMapReact>
        </div>
     );
...