web-dev-qa-db-fra.com

Comment charger une sous-couche Google Maps dans Leaflet (après juin 2018)?

J'ai une carte de dépliant sur mon site Web en utilisant des images satellite de Google comme carte de base. Après le 11 juin 2018, les vignettes de la carte Google ne peuvent plus être accessibles sans clé API. Les tuiles sont actuellement accessibles via Leaflet JS en utilisant le javascript suivant.

googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

Comment vais-je inclure ma clé API pour pouvoir continuer à accéder aux tuiles de carte à partir de Leaflet après le 11 juin 2018?

google-mapsleafletmaps
5
Ashley Goldstraw

Le chargement de tuiles à partir de Google Maps en spécifiant simplement l'URL d'une API non documentée est contraire aux conditions d'utilisation de Google Maps . Permettez-moi de citer d'eux:

  1. Restrictions de licence.

10.1 Restrictions administratives.

Aucun accès aux API ou au contenu sauf via le service. Vous n'accéderez pas aux API Maps ni au contenu, sauf par le biais du service. Par exemple, vous ne devez pas accéder aux vignettes de carte ou aux images via des interfaces ou des canaux (y compris des interfaces Google non documentées) autres que les API Maps.

Vous noterez également que les URL des tuiles ne sont pas documentées dans leur documentation de développement (au début de juin 2018).

Ce que vous pouvez faire, cependant, est de charger une instance de Google Map par instance de Leaflet, de synchroniser les tailles et les centres de la carte, et d'utiliser des observateurs de mutation pour surveiller chaque fois que l'instance de Google Map se charge une tuile, de sorte que vous pouvez l'arracher de l'arborescence DOM de Google Map et la placer dans l'arborescence DOM de Leaflet (si vous utilisez simplement un CSS délicat pour afficher Leaflet au-dessus de Google Maps, vous aurez éventuellement des problèmes de synchronisation des animations de zoom des deux).

Si cela vous semble trop effrayant, ne vous inquiétez pas. Leaflet.GoogleMutant fait tout le gros du travail pour vous. Permettez-moi de citer son readme:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
<script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>

var roads = L.gridLayer.googleMutant({ type: 'roadmap' }).addTo(map);

Notez qu'il y a une place parfaitement évidente pour votre clé API (qui est votre principale préoccupation), et que GoogleMutant utilise uniquement l'API publique (et documentée) (dont vous devriez également vous inquiéter, car elle se trouve dans les ToS).

5
IvanSanchez