React 中的 Google 地图未在混合视图中显示街道和城市名称答案

【问题标题】：Google Maps in React not showing street and city names in hybrid viewReact 中的 Google 地图未在混合视图中显示街道和城市名称
【发布时间】：2017-12-18 09:02:38
【问题描述】：

我使用the example here 作为粗略指南。我正在尝试使用 Google Maps 实现 Leaflet.js，为图像提供基础层。一切都很好，但混合视图（卫星+地点/街道名称）仅显示卫星图像 - 没有名称。

我确实注意到，在连接不良的情况下加载它，带有名称的层会短暂显示然后被掩埋，这让我怀疑这是否是 z-index 问题。

这是我的组件的相关部分：

...

const { BaseLayer } = LayersControl;
const key = 'MYKEY';
const hybrid = 'HYBRID';
const terrain = 'TERRAIN';
const road = 'ROADMAP';
const satellite = 'SATELLITE';   

...

export class PlotMap extends Component {
    render() {
        const filteredPlots = this.props.filteredPlots;
        console.log(JSON.stringify(mapCenter));
        return (
            <div
                className="col-sm-8 m-auto p-0 flex-column float-right"
                style={{ height: `85vh` }}>
                <Map center={mapCenter(this.props)} zoom={zoomLevel} zoomControl={true}>
                    <LayersControl position="topright">
                        <BaseLayer name="Google Maps Satellite">
                            <GoogleLayer googlekey={key} maptype={satellite} />
                        </BaseLayer>
                        <BaseLayer checked name="Google Maps Hybrid">
                            <GoogleLayer
                                googlekey={key}
                                maptype={hybrid}
                                libraries={['geometry', 'places']}
                            />
                        </BaseLayer>
                        <BaseLayer name="Google Maps with Libraries">
                            <GoogleLayer
                                googlekey={key}
                                maptype={hybrid}
                                libraries={['geometry', 'places']}
                            />
                        </BaseLayer>
                    </LayersControl>
                </Map>
            </div>
        );
    }
}

我对 Google Maps API 有什么遗漏吗？

【问题讨论】：

标签： reactjs google-maps leaflet react-leaflet

【解决方案1】：

尝试使用 react-leaflet-google-layer 库的 ReactLeafletGoogleLayer 组件。

我不知道它是否有帮助，或者您是否已更正它，但这个库对我来说运行良好。以下是简要文档：https://www.npmjs.com/package/react-leaflet-google-layer

【讨论】：