Come utilizzare l'API di Google Maps in volantino-cloudmade

Question

C'è un modo per integrare Google Maps con volantino-cloudmade? Voglio dire, non voglio usare la mappa cloudmade originale, ma voglio invece usare Google Maps. Voglio mostrare una mappa dell'Alaska (non ci sono molte strade lì). Se uso una mappa cloudmade, sarebbe solo bianca.

Questo è quello che faccio se voglio usare mappa CloudMade:

var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png', { 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>', 
    maxZoom: 18 
}); 

So che dovrei cambiare il 'http : // {s} .tile.cloudmade.com/YOUR-API- KEY/997/256/{z}/{x}/{y} .png ' parte. Ma, cosa dovrei scrivere lì se voglio usare google map (o qualsiasi altra mappa)?

Questa è la documentazione di leaflet-cloudmade (non dicono molto sull'uso di third-party map provider. Dicono che sono agnostici sul provider di mappe utilizzato nella nostra applicazione, quindi penso che dovrebbe essere possibile usare Google Maps) .

Answer 1

Google non consente di utilizzare le tessere senza utilizzare la propria API per ottenerle. Vedi il General Terms:

Non utilizzare impropriamente i nostri Servizi. Ad esempio, non ... provare ad accedervi utilizzando un metodo diverso dall'interfaccia e le istruzioni che forniamo.

Tutto è possibile, ovviamente, quindi è possibile ottenere le tessere, senza l'API, ma l'accesso può essere bloccato senza preavviso:

Possiamo sospendere o interrompere la fornitura dei nostri Servizi se non rispetti i nostri termini o le nostre politiche o se stiamo indagando su una sospetta cattiva condotta.

Detto questo, al foglio API non sembra molto diversa dalle API di Google, quindi la conversione di usare le loro API potrebbe essere opportuno prendere in considerazione.

Answer 2

C'è un plug-in di terze parti che fornisce l'integrazione di Google Maps in Leaflet per poterlo aggiungere come layer: http://psha.org.ru/b/leaflet-plugins.html. Tuttavia funge da proxy per l'API v3 di Google Maps originale, quindi non funziona in modo semplice come semplici livelli di tile di Leaflet e, sfortunatamente, non è possibile utilizzare i riquadri di Google Maps direttamente a causa delle restrizioni dei Termini d'uso (come nella risposta sopra).

Answer 3

Il official leaflet.js plugins page fa riferimento al pacchetto Plugins by Pavel Shramov.
Il Google.js fornito fornisce l'accesso ai riquadri di Google Maps utilizzando l'API di Google Maps v3, in relazione ai termini di utilizzo.

Ecco un rapido esempio: è possibile utilizzarlo aggiungendo prima

<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script> 
<script src="path/to/Google.js"></script> 

e poi costruire la vostra mappa:

var map = new L.Map('map', {center: new L.LatLng(43.6481, -79.4042), zoom: 13}); 
var gmap_layer = new L.Google('ROADMAP'); 
map.addLayer(gmap_layer); 

---

Nota: ci sono anche alcune forcelle menzionati in this gist.

Answer 4

In realtà non è Google Maps, ma c'è una grande varietà di differenti volantino Fornitore Mappe con codici di esempio disponibili a http://leaflet-extras.github.io/leaflet-providers/preview/

Forse si potrebbe trovare un fornitore adeguato al vostro problema specifico lì. Come un vantaggio si eviteranno i problemi che Andrew Leach ha sottolineato. Ad ogni modo - non che mi aspettassi che tu non lo sapessi, ma comunque non voglio lasciarlo fuori - tieni presente che alcuni (ma non tutti) i fornitori di mappe sono commerciali e quindi potresti dover pagare per il servizio o potrebbe preoccuparsi di altre TOS.

Answer 5

Da this:

Questo plugin for Debian manca questo problema, ma non soddisfa i termini di servizio di Google (Oficial example).

Oppure provare questo codice:

var map = L.map('map').setView([ 51.505, -0.09 ], 13); 

L.tileLayer('//mt{s}.googleapis.com/vt?x={x}&y={y}&z={z}', 
{ 
    maxZoom: 18, 
    subdomains: [ 0, 1, 2, 3 ] 
}).addTo(map); 

var marker = L.marker([ 51.5, -0.09 ]).addTo(map);