2012-06-17 9 views
22

Gibt es eine Möglichkeit, Google Maps mit leaflet-cloudmade zu integrieren? Ich meine, ich möchte nicht die originale cloudmade map verwenden, sondern stattdessen Google Maps. Ich möchte eine Karte von Alaska zeigen (nicht viele Straßen dort). Wenn ich eine cloudmade map verwende, wäre es nur weiß.Wie benutzt man Google Maps API in leaflet-cloudmade

Dies ist, was ich tun, wenn Cloudmade Karte verwenden möchten:

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 
}); 

Ich weiß, ich sollte sich ändern, die ‚http: // {s} .tile.cloudmade.com/YOUR-API- KEY/997/256/{z}/{x}/{y} .png ' Teil. Aber was soll ich dort schreiben, wenn ich Google Map (oder eine andere Karte) benutzen möchte?

Dies ist die Dokumentation von leaflet-cloudmade (sie sagen nicht viel über die Verwendung third-party map provider. Sie sagen, sie sind Agnostiker über Map-Provider in unserer Anwendung verwendet, so denke ich, dass es möglich sein sollte, Google Maps verwenden) .

+0

@dda: Vielen Dank meine Frage für die Bearbeitung. – goFrendiAsgard

Antwort

14

Google erlaubt Ihnen nicht, ihre Kacheln zu verwenden, ohne ihre eigene API zu verwenden, um sie zu erhalten. Siehe General Terms:

Nicht missbrauchen unsere Dienstleistungen. Versuchen Sie beispielsweise nicht, mit einer anderen Methode als der Schnittstelle und den von uns bereitgestellten Anweisungen auf sie zuzugreifen.

Alles ist möglich, natürlich, so ist es möglich, die Fliesen ohne die API zu erhalten, aber Ihr Zugriff kann ohne Vorwarnung gesperrt werden:

Wir aussetzen oder aufhören, unsere Dienstleistungen zu erbringen Sie, wenn Sie unsere Bedingungen oder Richtlinien nicht einhalten oder wenn wir ein mutmaßliches Fehlverhalten untersuchen.

Das heißt, die Broschüre API sieht nicht sehr unterscheidet sich von der Google-API, so Konvertierung ihre API verwenden auch eine Überlegung wert sein kann.

+0

Hallo, ich weiß es vorher nicht. Danke, dass Sie diese Information gegeben haben. – goFrendiAsgard

2

Es gibt ein Drittanbieter-Plugin, das die Integration von Google Maps in Leaflet ermöglicht, um es als Layer hinzuzufügen: http://psha.org.ru/b/leaflet-plugins.html. Es fungiert jedoch als Proxy für das ursprüngliche Google Maps API v3 und funktioniert daher nicht so reibungslos wie einfache Blättchenfliesenebenen. Leider können Sie Google Maps-Kacheln aufgrund von Nutzungsbedingungen (wie in der Antwort) nicht direkt verwenden über).

23

Die official leaflet.js plugins page bezieht sich auf das Plugins by Pavel Shramov Paket.
Die bereitgestellten Google.js gibt Ihnen Zugang zu Google Maps Fliesen mit Google Maps API v3, in Bezug auf die Nutzungsbedingungen.

Hier ist ein kurzes Beispiel: Sie können es, indem zuerst

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

und Ihre Karte dann bauen können:

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); 

Hinweis: gibt es auch einige Gabeln erwähnt in this gist.

2

Es ist nicht wirklich Google Maps, aber es gibt eine große Auswahl an verschiedenen Leaflet Kartenanbietern mit Beispielcodes verfügbar bei http://leaflet-extras.github.io/leaflet-providers/preview/

Vielleicht finden Sie vielleicht einen Anbieter entsprechend Ihr spezifisches Problem. Als ein Plus werden Sie die Probleme vermeiden, auf die Andrew Leach hingewiesen hat. Wie auch immer - nicht, dass ich erwartet hätte, dass du es nicht weißt, aber trotzdem möchte ich das nicht auslassen - bitte beachte, dass einige (aber nicht alle) Kartenanbieter kommerzielle Anbieter sind und du für den Service bezahlen musst oder könnte sich um andere TOSes kümmern.

+0

Vielen Dank für das Informieren. – goFrendiAsgard

1

Von this:

Diese plugin for Debian fehlt dieses Problem, aber nicht Bezug auf den Service von Google treffen (Oficial example).

Oder versuchen Sie diesen Code:

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);