样式 google-map-react 地图

Question

我正在使用google-map-react构建地图，并试图在没有运气的情况下对其进行样式设置。 我在这里使用文档： https : //github.com/google-map-react/google-map-react/blob/master/API.md并通过名为options的道具添加样式，就像它说的，但我没有看到正在应用的任何样式。

这是我的代码：

const createMapOptions = () => {
  return {
    styles: [{stylers: [{'saturation': -100}, {'gamma': 0.2}, {'lightness': 4}, {'visibility': 'on'}]}]
  }
}

const Map = ({center, children, onGoogleApiLoaded, useGoogleMapsApis, zoom}) => {

  return (
    <div className='h-100p w-100p'>
      <GoogleMap
        bootstrapURLKeys={{key: '...'}}
        defaultCenter={center}
        defaultZoom={zoom}
        options={createMapOptions}
        yesIWantToUseGoogleMapApiInternals={useGoogleMapsApis}
        onGoogleApiLoaded={onGoogleApiLoaded}
      >
        {children}
      </GoogleMap>
    </div>
  )
}

任何关于如何应用任何样式的指导将不胜感激。

注意- 我正在使用开发人员密钥，不确定这是否可能是我看不到样式的原因？

另请注意- 我不希望关于react-google-maps的提示与类似的库，但与google-map-react 。 我已经看到其他google-map-react问题得到了回答，并与提到react-google-maps人一起投票。

Answer 1

有时，当您使用包时，样式的反应会很困难。 所以最好的方法是

1. 在浏览器中打开 Inspect Element
2. 选择要修改其样式的特定元素。
3. 复制已在其中使用的类。
4. 在您自己的 scss 或 css 文件中对相同的 css className 进行更改并将进行修改。

注意：如果没有发生任何事情尝试使用属性中的 !important。

Answer 2

https://developers.google.com/maps/documentation/javascript/controls#ControlOptions

将此用作资源来更改包的 css。

以上资源截图