2

我在这里使用示例作为粗略指南。我正在尝试使用 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 有什么遗漏吗？

4

1 回答 1

0

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

我不知道它是否有帮助，或者您是否已更正它，但这个库对我来说工作得很好。这是简短的文档：https ://www.npmjs.com/package/react-leaflet-google-layer

于 2021-04-27T00:38:52.930 回答