在react-google-maps中自定义样式的Google地图

我试图给我的谷歌地图一个不同的外观。我正在将此代码作为如何执行的说明：https : //github.com/wuct/react-google-maps/blob/21d70d0afd03aa802cdc69028c8ead2f35b3c1ce/examples/gh-pages/scripts/components/basics/StyledMap.js ＃L40-L43

到目前为止，我的代码如下：

import "./UserReportsMap.css"

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps'

const Map = withGoogleMap(props => (
    
        {props.markers.map((marker, index) => (
            
        ))}
    
    )
)

class UserReportsMap extends Component {

static getCloudEmoji(report) {
    return "/img/noto/" + report.info.clouds + ".png"}

mapReportsToMarkers = reports => (
    reports.map(report => ({
        position: {
            lat: report.info.position.latitude,
            lng: report.info.position.longitude
        },
        defaultAnimation: 2,
        key: report.id,
        options: {
            icon: UserReportsMap.getCloudEmoji(report)
        }
    }))
)

render() {
    return (
        

            

我不断收到错误

./src/page/weather/UserReportsMap/UserReportsMap.js
Line 55:  'mapStyles' is not defined  no-undef
Line 62:  'StyledMap' is not defined  no-undef

有人可以帮忙吗？我究竟做错了什么？

使用react.google.maps可以通过以下方式设置地图样式：

const exampleMapStyles = [
    {
        featureType: "poi",
        elementType: "geometry",
        stylers: [
            {
                color: "#eeeeee",
            },
        ],
    },
    {
        featureType: "poi",
        elementType: "labels.text",
        stylers: [
            {
                visibility: "off",
            },
        ],
    },
    {
        featureType: "water",
        elementType: "labels.text.fill",
        stylers: [
            {
                color: "#9e9e9e",
            },
        ],
    },
];

const gogleMap = (
    
        
    
);

要么

const gogleMap = (
        
            
        
    );

您不会在官方文档中找到它。但是，这有效。