隐藏 react-google-maps 上的默认全屏按钮答案

【问题标题】：Hide default fullscreen button on react-google-maps隐藏 react-google-maps 上的默认全屏按钮
【发布时间】：2017-08-15 10:31:53
【问题描述】：

我对 react-google-maps 有疑问。

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

我已经尝试过，但找不到摆脱默认按钮的方法。我尝试将其添加到我的代码中，但没有成功。

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

任何帮助将不胜感激。

干杯！

【问题讨论】：

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

【解决方案1】：

我认为库有更新：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}
  />
))

希望对你有帮助

【讨论】：

【解决方案2】：

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

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

【讨论】：

请编辑此答案，更新新的 API 参数。 defaultOptions 被 options 取代。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

.gm-fullscreen-control {
 display: none!important;
}

【讨论】：

为什么要用类名禁用它？如果类名在另一个版本中发生变化怎么办？既然图书馆提供了解决方案，为什么还要使用 hack？

【解决方案5】：

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

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

【讨论】：

库有一个可以传递的道具，通过 css 禁用不是有效的解决方案，可能会导致错误。

【解决方案6】：

没有一个解决方案有效，我有 2.0.6 版本的 google-maps-react。它有效，但是作为道具传递。

例子：

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

【讨论】：