1

我正在构建地图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。

4

2 回答 2

0

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

使用它作为资源来更改包的 css。

以上资源截图 在此处输入图像描述

于 2020-08-23T14:47:08.173 回答
0

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

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

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

于 2020-08-22T22:28:28.190 回答