reactjs React未返回多个组件

vi4fp9gy  于 2022-11-29  发布在  React
关注(0)|答案(1)|浏览(134)

我正在使用谷歌Mapapi在谷歌Map上显示标记列表和信息窗口。这段代码正确地遍历了所有的位置坐标,并为每个纬度和经度放置了标记。对于每个标记,我想显示一个单独的信息窗口,但下面的代码给出了一些不匹配的括号错误。
下面是代码;

return (
    <div>
      <Fragment>
      <GoogleMap
        // options = {options}
        id="circle-example"
        zoom={12}
        center={{ lat: parseFloat(latitude), lng: parseFloat(longitude) }}
        mapContainerClassName="map-container"
      >
        <Circle center={center} radius={10} options={options} />

        {markers && markers.map(({ email, latitude, longitude }) => (   
        
        <Marker
         key = {email}
          position={{ lat: parseFloat(latitude), lng: parseFloat(longitude) }}
          onClick={() => {
            setSelected({
              lat: parseFloat(latitude),
              lng: parseFloat(longitude),
            });
            console.log(selected);
          }}
          icon={{
            url: "/personicon.png",
            scaledSize: new window.google.maps.Size(25, 25),
          }}
        />
               **// ))}   error gets removed when I place the brackets here.**      
        
        {selected && (
          <InfoWindow
            //    position={{lat: selected.lat, lng:selected.lng}}
            position={{ lat: parseFloat(latitude), lng: parseFloat(longitude) }}
            onCloseClick={() => {
              console.log("selected"+selected);
              setSelected(null);
            }}
          >
            <div>
              {latitude}, {longitude}
            </div>
          </InfoWindow>
        )}
  
          ))}    **//error appears when I put this brackets here But I want these the bracket         here to include the infowindow component for each marker**

        <Circle
          center={{ lat: parseFloat(latitude), lng: parseFloat(longitude) }}
          radius={500000}
        />
      </GoogleMap>
      </Fragment>
    </div>
  );
}

我试过使用fragmant和div标签,但没有任何帮助。

ulydmbyx

ulydmbyx1#

如果需要为每个标记显示InfoWindow,则需要添加React.fragment,因为不能返回单个元素

{markers && markers.map(({ email, latitude, longitude }) =>  {
   
   // this should return a single element
   return(
     <React.Fragment>
        <Marker
          ... marker props 
          onClick={() => {
             // set selected email
             // or other unique key for the marker like id
             // since two emails can have same coordinates
             setSelected({
               lat: parseFloat(latitude),
               lng: parseFloat(longitude),
               email 
             });
             // of create another state
             //setSelectedEmail(email)
             console.log(selected);
             
          }}
        />
        {(email?.email === email) && (
        <InfoWindow
          ... props
        </InfoWindow>
        )}
      </React.Fragment>
    ) // end of return inside the list
 })}

希望这能解决你的问题

相关问题