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

Question

我正在使用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>
);

}

这是我现在的标记

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

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

我希望这有帮助！