Quiero usar el mapa del folleto en mi proyecto de reacción y me gustaría agregar un control de capa donde el usuario pueda cambiar entre vista de calle y vista de satélite. Estoy tratando de usar la vista satelital de Google, pero parece que no funciona.
Aquí está mi código
function App() { return ( <div className="App"> <MapContainer center={[40.44695, -345.23437]} zoom={2}> <LayersControl> <BaseLayer checked name="OpenStreetMap"> <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' /> </BaseLayer> <BaseLayer name="Satellite View"> <TileLayer url='https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}' maxZoom= {20} /> </BaseLayer> </LayersControl> </MapContainer> </div> ); } export default App;Muchísimas gracias
La URL de mosaico que está utilizando para Google Maps no existe:
https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}
De los documentos del folleto:
{s} significa uno de los subdominios disponibles (usado secuencialmente para ayudar con las solicitudes paralelas del navegador por limitación de dominio; los valores de los subdominios se especifican en las opciones; a, b o c por defecto, se pueden omitir), {z} — nivel de zoom, { x} y {y}: coordenadas de mosaico. {r} se puede usar para agregar "@2x" a la URL para cargar mosaicos de retina.
Las direcciones URL que está solicitando utilizan los subdominios predeterminados a , b y c , que aparecen rotos:
Parece que los subdominios correctos son mt1 , mt2 y mt3 . Puede especificarlos usando la propiedad de subdomains :
<TileLayer url='https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}' maxZoom= {20} subdomains={['mt1','mt2','mt3']} />