реакция-google-карты выровнять маркер по горизонтали по горизонтали - PullRequest
Новая
       56

реакция-google-карты выровнять маркер по горизонтали по горизонтали

0 голосов
/ 29 ноября 2018

Я хочу создать маркер с меткой выше, а позже сделать так, чтобы я мог щелкнуть маркер, и он откроет информационные поля.У меня есть: 

<MarkerWithLabel labelAnchor={{x: 0, y: 25}} icon={marker_icons[post.type]} key={post.id} position={{lat: post.location.lat, lng: post.location.lon}}>
    <div style={{fontSize: 14}}>{post.prefix + " " + post.name}</div>
</MarkerWithLabel>

В настоящее время оно выглядит как левый, но я хочу выровнять ярлык, чтобы он выглядел как правый, как бы я смог это сделать?

enter image description here

1 Ответ

0 голосов
/ 01 декабря 2018

К выровнять метку можно рассмотреть следующую опцию:

  • указать контейнер метки (div) width и установить text-align на center через labelStyle property
  • set labelAnchor свойство, основанное на ширине контейнера меток

В следующем примере метка сверху маркера и содержимое метки вертикально выровнены по центру 

const Map = (props) => {

    const labelSize = { width: 220};
    const labelPadding = 8;

    return (
      <GoogleMap 
        defaultZoom={props.zoom}
        defaultCenter={props.center}
      >
        {props.places.map(place => {
          return (
            <MarkerWithLabel
              labelStyle={{ textAlign: "center", width:labelSize.width + 'px', backgroundColor: "#7fffd4", fontSize: "14px", padding:  labelPadding + "px"}}
              labelAnchor={{ x: (labelSize.width/2) + labelPadding , y: 80 }}
              key={place.id}
              position={{ lat: place.lat, lng: place.lng }}>
              <span>{place.name}</span>
            </MarkerWithLabel>
          );
        })}
      </GoogleMap>
    );
}

Демо

...