reactjs - 遍历道具以在反应谷歌地图中绘制标记？

Question

我正在使用 React Google Maps。我正在尝试获取所有合同的纬度和经度坐标，以便我可以将每个合同绘制为谷歌地图上的标记。

这是我目前正在使用的代码：

       <GoogleMap
        googleMapURL={ props.googleMapURL }
        loadingElement={ <div style={ { height: "100%" } } /> }
        containerElement={ <div style={ { height: "400px", width: "350px" } } /> }
        mapElement={ <div style={ { height: "400px", width: "400px" } } 
        /> }
        zoom={12}
        defaultCenter={{ lat: props.lat, lng: props.lng }}
       >
      <Marker 
        position={{ lat: props.lat, lng: props.lng  }}
        icon={ iconfilepath }
        />
        </GoogleMap>

上面的代码为每个合约生成了一张地图，这不是我想要的。

这就是我试图在一张谷歌地图中绘制所有标记的方法：

 <GoogleMap
        googleMapURL={ props.googleMapURL }
        loadingElement={ <div style={ { height: "100%" } } /> }
        containerElement={ <div style={ { height: "400px", width: "350px" } } /> }
        mapElement={ <div style={ { height: "400px", width: "400px" } } /> }
        zoom={12}
        defaultCenter={{ lat: props.lat, lng: props.lng }}
      >
      <MarkerClusterer
        averageCenter
        enableRetinaIcons
        gridSize={60}            
        >
       {props.map(marker => (
        <Marker
          key={marker.id}
          icon={ iconfilepath }
          position={{ lat: marker.lat, lng: marker.lng }}
        />
       ))}         
      </MarkerClusterer>
      </GoogleMap>

谁能告诉我为什么上述方法不起作用？