google-map-react 填充多个标记答案

【问题标题】：google-map-react populate multiple markersgoogle-map-react 填充多个标记
【发布时间】：2019-11-09 03:06:12
【问题描述】：

我目前正在尝试使用地图功能在我的谷歌地图上填充标记。我似乎无法得到任何填充。是否有我不理解的限制或我遗漏了什么？我尝试用更简单的东西替换 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>
        );
    }

【问题讨论】：

标签： javascript reactjs google-map-react

【解决方案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>
     );

【讨论】：

似乎不起作用.. 仍然显示空地图。不知道出了什么问题，因为如果我打印出标记，它似乎有正确的信息。

【解决方案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
    }

【讨论】：