google-map-react填充多个标记

Question

我目前正在尝试使用地图功能使用标记来填充我的google地图。我似乎找不到任何东西来填充。有没有我不理解的限制，或者我错过了什么？我试着用更简单的东西替换FontAwesomeIcon，但它不能呈现。如果您在GoogleMapReact组件中多次复制paste FontAwesomeIcon，它似乎可以工作，但我似乎不能让它在map中工作。任何建议都将不胜感激。

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

Answer 1

要在地图上显示多个标记，必须将标记数组作为子级传递给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>
     );

Answer 2

const createMarker = ({ map, maps }: Mapprops) => {
    const markers = props.listingPins.map(data => {
      return new maps.Marker({ position: data });
    });
  };
<GoogleMapReact
   bootstrapURLKeys={{ key: "key" }}
   center={center}
   zoom={zoom}
   onGoogleApiLoaded={createMarker}
   >
</GoogleMapReact>

这将为您创建标记。

您需要确保数据对象的格式如下：

data: {
    lat: number
    lng: number
    }