在 google-maps-react 中将标记下方的标记标签添加到 Google 地图答案

【问题标题】：Adding Marker Label underneath a marker to Google Maps in google-maps-react在 google-maps-react 中将标记下方的标记标签添加到 Google 地图
【发布时间】：2020-07-30 04:00:46
【问题描述】：

我正在使用 google-maps-react 包创建 Google 地图并使用 Marker 创建标记。

我的问题：如何在标记下方添加标记标签？现在我让它显示一个标题，但它在标记的顶部。

除了自定义标记图标之外，我还有我现在拥有的内容与我正在尝试完成的内容的屏幕截图。

这是我创建标记的功能。

displayMarkers = () => {
const data = locationsData;
return data.map((location, index) => {
  return (
    <Marker
      key={index}
      id={index}
      position={{
        lat: location.latitude,
        lng: location.longitude,
      }}
      label={location.state}
    />
  );
});

};

然后这是我的渲染来显示地图然后调用显示标记函数。

render() {
const { google } = this.props;
return (
  <Map google={google} zoom={4}>
    {this.displayMarkers()}
  </Map>
);

}

这是我现在的标记

这也是我想要得到的。不需要所有样式，只需要下面的文本

【问题讨论】：

标签： javascript reactjs google-maps google-maps-api-3 google-maps-react

【解决方案1】：

将 InfoWindow 的 pixelOffset 属性设置为零 (0) 会将 InfoWindow 移动到标记的底部。例如pixelOffset={"0"}

您可以在google-maps-react 上执行此操作：

<InfoWindow
    pixelOffset={"0"}
    marker={this.state.activeMarker}
    visible={this.state.showingInfoWindow}>
    <div>
       <h1>{this.state.selectedPlace.name}</h1>
    </div>
</InfoWindow>

我希望这会有所帮助！

【讨论】：