javascript - google-map-react 填充多个标记

Question

我目前正在尝试使用地图功能用标记填充我的谷歌地图。我似乎无法填充任何东西。是否有我不理解的限制或我遗漏了什么？我尝试用更简单的东西替换 FontAwesomeIcon，但它没有渲染。如果您在 GoogleMapReact 组件中多次复制粘贴 FontAwesomeIcon ，它似乎可以工作，但我似乎无法使其与地图一起使用。任何建议将不胜感激。

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
    }