Question

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

我注意到，将它加载到一个糟糕的连接上，带有名称的图层会短暂显示然后被隐藏，这让我想知道它是否是一个z索引问题。

以下是我的组件的相关部分：

...

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是否缺少某些内容？

Answer 1

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

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

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

1 个答案: