在react-google-maps上隐藏默认全屏按钮

Question

我对react-google-maps有疑问。

我为FullScreen切换创建了自己的按钮

我试过但找不到摆脱默认按钮的方法。 我试着将它添加到我的代码中，但它没有用。

<GoogleMap
 ref={(map) => console.log()}
 defaultZoom={12}
 defaultCenter={{ lat: this.state.lat, lng: this.state.lng }}
 fullscreenControl={false}
>

任何帮助将不胜感激。

干杯！

Answer 1

只是将其包含在默认选项中

const defaultMapOptions = {
  fullscreenControl: false,
};

const InputGoogleMap = withGoogleMap(props=>(
  <GoogleMap
    ref={(map) => console.log()}
    defaultZoom={12}
    defaultCenter={{ lat: this.state.lat, lng: this.state.lng }}
    defaultOptions={defaultMapOptions}
  />
))

有关更多Google地图选项，请点击此处： https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapOptions

Answer 2

以上两种解决方案均不适用于我。由于我使用了一些自定义样式以及上述样式。这会同时删除全屏以及放大和缩小按钮

const waterStyle = [
{
  featureType: "water",
  elementType: "geometry.fill",
  stylers: [
    {
      color: "#4BB4F5",
    },
  ],
},]

 <GoogleMap
    defaultCenter={{ lat: 0, lng: 0 }}
    defaultZoom={3}
    options={{
      styles: waterStyle,
      disableDefaultUI: true,
    }}
  >

如果您只想隐藏全屏按钮，请使用：放大和缩小按钮可以看到和使用

 <GoogleMap
    defaultCenter={{ lat: 0, lng: 0 }}
    defaultZoom={3}
    options={{
      styles: waterStyle,
      fullscreenControl: false,
    }}
  >

Answer 3

我认为图书馆有更新：google-map-react 0.23

defaultOptions更改为options

const mapOptions = {
  fullscreenControl: false,
};

const Map = withGoogleMap(props=>(
  <GoogleMap
    defaultZoom={12}
    defaultCenter={{ lat: this.state.lat, lng: this.state.lng }}
    options={mapOptions}
  />
))

希望有帮助

Answer 4

所有解决方案均无效，我有2.0.6版本的google-maps-react。它奏效了，但是作为道具传下来了。

示例：

<GoogleMap
defaultCenter={{ lat: 0, lng: 0 }}
defaultZoom={3}
fullscreenControl: false,
>

Answer 5

不，我的伙伴解决了它，只是瞄准了班级，而不是试图用道具隐藏它

\w*\d+\w*

Answer 6

我们需要隐藏图标并禁用点击事件：

.gmnoprint.gm-style-cc + button,
.gm-fullscreen-control {
  display: none;
}