将标记代码格式化为React Google Map

时间:2019-02-28 07:47:20

标签: reactjs google-maps react-google-maps

<GoogleMap
    defaultZoom={props.zoom}
    defaultCenter={props.center}
    
  >
    {props.places &&
      props.places.map((place, i) => {
        
        if (!props.providerDetailsId) {
          
          if (place.providerKey === props.setSelectedCard) {
            iconName = 'http://maps.google.com/mapfiles/ms/icons/yellow.png'
          } else {
            iconName = markerImages
          }

          return (

          <Marker
            id={place.id}
            key={place.id}
            position={{lat: lat, lng: lng}}
            icon={iconName}
            onMouseOver={ () => props.onToggleOpen(this, i)}
            onMouseOut={ () => props.onToggleMouseOut(this, i)}
            onClick={ () => props.onClick(place.providerKey, props)}
          >
            {props.infoWindows[i].isOpen && (
              <InfoWindow onCloseClick={() => props.onToggleOpen(i)}>
                <Hover>
                  <div >
                    {"index " + i +"-"+ place.providerKey}
                    <HoverLink href="#">{place.displayName}</HoverLink>
                    
                  </div>
                </Hover>
              </InfoWindow>
            )}
          </Marker>
        );

        } else {
          if (place.providerKey.toString() === props.providerDetailsId) {
            console.log(place.providerKey.toString() +"====" + props.providerDetailsId)
            iconName = 'http://maps.google.com/mapfiles/ms/icons/yellow.png'
           

				  return (

				  <Marker
					id={place.id}
					key={place.id}
					position={{lat: lat, lng: lng}}
					icon={iconName}
					onMouseOver={props.onToggleOpen.bind(this, i)}
					onMouseOut={props.onToggleMouseOut.bind(this, i)}
					onClick={props.onClick(place.providerKey, props)}
				  >
					{props.infoWindows[i].isOpen && (
					  <InfoWindow onCloseClick={props.onToggleOpen.bind(i)}>
						<Hover>
						  <div >
							{"index " + i +"-"+ place.providerKey}
							<HoverLink href="#">{place.displayName}</HoverLink>
							
						  </div>
						</Hover>
					  </InfoWindow>
					)}
				  </Marker>
				);
			}
        }

        
      })}
  </GoogleMap>

以下是带有标记的示例GoogleMap的代码段。 在此代码段中的if和else中包含Marker。可以将代码格式化,让我知道如何创建单独的函数并从那里返回Marker。 我的要求是格式化标记代码,是否可以通过任何方式创建标记功能并从那里返回标记代码,而不是将代码分成if。

0 个答案:

没有答案