react-google-maps 水平对齐 MarkerWithLabel

Question

我想创建一个带有上面标签的标记，稍后再创建它，以便我可以单击该标记并打开信息框。我有：

<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>

目前它看起来像左边，但我想将标签对齐看起来像右边，我该怎么做？

Answer 1

要对齐标签可以考虑以下选项：

指定标签容器 (div) width 并通过 labelStyle 属性

text-align

center

根据标签容器宽度设置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>
    );
}

Demo

Answer 2

对于使用@react-google-maps/api 而不是
的任何人 react-google-maps 模块

是的，我认为它们是不同的 npm 包 o_O

总之组件有这个道具
这是我的做法

<Marker
label={"Label onTop? pls"}

icon={{
url: "some_img_link",
labelOrigin: new maps.Point(25, -10),
}}

position={{
lat: 26.259,
lng: -80.27,
}}
/>

如果你像我一样是菜鸟 ;/ 并且你想知道我是怎么知道 labelOrigin 那么..这些奇特的库....我希望他们使用 google的api

这是 link 那个东西

https://developers.google.com/maps/documentation/javascript/reference/marker#Icon.labelOrigin

祝你好运

react-google-maps 水平对齐 MarkerWithLabel

react-google-maps align MarkerWithLabel horizontally

google-maps-api-3

marker

google-maps-markers

reactjs

react-google-maps