react-google-maps 水平对齐 MarkerWithLabel

Posted

技术标签:

【中文标题】react-google-maps 水平对齐 MarkerWithLabel【英文标题】:react-google-maps align MarkerWithLabel horizontally 【发布时间】:2019-05-01 17:34:00 【问题描述】:

我想在上面创建一个带有标签的标记,然后制作它,以便我可以单击该标记并打开信息框。我有:

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

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

【问题讨论】:

【参考方案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

【讨论】:

谢谢!我所要做的就是从 labelAnchor.x 中减去 18px-ish,因为我正在使用 svg 图标,否则它有点偏离。 更新!我没有这样做,而是通过编辑它们来修复我的 SVG 图像,使中心位于左上角,因此它们正确居中。【参考方案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 的......这些花哨的库......我希望他们使用谷歌的 api

这里有一个链接

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

祝你好运

【讨论】:

以上是关于react-google-maps 水平对齐 MarkerWithLabel的主要内容,如果未能解决你的问题,请参考以下文章

Reactjs react-google-maps 未定义

如何使用 react-google-maps 显示多个标记

如何使用 react-google-maps 库创建折线

左对齐的水平堆栈视图和顶部对齐的垂直堆栈视图

用红色边框水平对齐 div [重复]

css基础文本对齐,水平对齐,垂直对齐