Google maps 使用谷歌地图创建和添加样式地图类型

我想要一个

卫星

、一个

路线图

和一个

自定义地图

地图样式按钮菜单

我试图遵循谷歌api的指导原则：

并将它们应用到我在react应用程序中使用的

react google maps

包中，但我无法使其正常工作

有可能吗？如果是，如何进行

这是我的密码：

import React from 'react';
import { GoogleMap, withGoogleMap, withScriptjs } from 'react-google-maps';
import { compose, withProps } from 'recompose';

const MyMap = () => {
    const styledMapType = new google.maps.StyledMapType(
       [
          {
            elementType: 'geometry',
            stylers: [{ color: '#ebe3cd' }],
          },
          {
            elementType: 'labels.text.fill',
            stylers: [{ color: '#523735' }],
          },
          // other properties
       ],
       { name: 'custom-map' }
    );

    const defaultOptions = {
       mapTypeControlOptions: {
          position: google.maps.ControlPosition.RIGHT_TOP,
          mapTypeIds: ['roadmap', 'satellite', 'custom-map'],
        },
        fullscreenControl: false,
        streetViewControl: false,
    };

    const mapRef = useRef(null);

    return <GoogleMap
            key="custom-map"
            defaultOptions={defaultOptions}
            ref={mapRef}
           />
}

export default compose(
    React.memo,
    withProps({
        containerElement: <div style={{ height: '100%' }} />,
        googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&key=my-key&libraries=geometry',
        loadingElement: <div style={{ height: '100%' }} />,
        mapElement: <div style={{ height: '100%' }} />,
    }),
    withScriptjs,
    withGoogleMap,
)(MyMap);

从“React”导入React；
从“react GoogleMaps”导入{GoogleMap，withGoogleMap，withScriptjs}；
从“重新组合”导入{compose，withProps}；
常量MyMap=（）=>{
const styledMapType=新的google.maps.styledMapType(
[
{
elementType:“几何体”，
样式器：[{color:'#ebe3cd'}]，
},
{
elementType:'labels.text.fill'，
样式器：[{color:'#523735'}]，
},
//其他属性
],
{name:'自定义映射'}
);
const defaultOptions={
mapTypeControlOptions：{
位置：google.maps.ControlPosition.RIGHT\u TOP，
MapTypeId:[“路线图”、“卫星”、“自定义地图”]，
},
全屏控制：错误，
街景控制：错误，
};
const mapRef=useRef（null）；
返回
}
导出默认组合(
反应，备忘录，
用道具({
集装箱运输：，
谷歌网址：'https://maps.googleapis.com/maps/api/js?v=3.exp&key=my-键和库=几何图形“，
加载元素：，
mapElement:，
}),
用ScriptJS，
用谷歌地图，
)（MyMap）；

什么不起作用？您在

新建google.maps.StyledMapType

中设置的名称（

自定义地图

）是“显示名称”或将显示在控件中的内容。它与您声明的

映射类型ID

不同（

自定义映射

）。您需要将2与

map.mapTypes.set（'custom-map'，styledMapType'）链接在一起参见工作示例。是的，我同意你的示例。但是，如何使用
react google maps
，设置地图类型呢？我在文档中没有找到任何东西：我的坏。。。我在那里发现：