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

Question

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

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

除了自定义标记图标之外，我还有我现在拥有的东西与我想要完成的东西的屏幕截图。

这是我创建标记的功能。

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

}

现在这是我的标记

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

Answer 1

将信息窗口的 pixelOffset 属性设置为零 (0) 会将信息窗口移动到标记的底部。例如，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>

希望对您有所帮助！

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

Adding Marker Label underneath a marker to Google Maps in google-maps-react

javascript

reactjs

google-maps

google-maps-api-3

google-maps-react