web-dev-qa-db-ja.com

leaflet-cloudmadeでGoogle Maps APIを使用する方法

Googleマップをleaflet-cloudmadeと統合する方法はありますか？つまり、オリジナルのクラウドマップを使いたくありませんが、代わりにGoogleマップを使いたいのです。アラスカの地図を表示したいと思います（それほど多くの道路はありません）。クラウドメイドの地図を使用すると、真っ白になります。

Cloudmade mapを使用したい場合は、次のようにします。

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

'http：// {s} .tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y } .png 'の部分。しかし、Googleマップ（または他のマップ）を使用したい場合は、そこに何を書けばよいですか？

これは、leaflet-cloudmadeのドキュメンテーションです（彼らは サードパーティのマッププロバイダー の使用についてはあまり言いません）。彼らは、アプリケーションで使用されるマッププロバイダーにとらわれていないと言っているので、 Googleマップを使用することが可能です）。

google-mapsgisleaflet
22
goFrendiAsgard

公式のleaflet.jsプラグインページ は Pavel Shramovによるプラグイン パッケージを参照します。
提供されたGoogle.jsを使用すると、Google Maps API v3を使用してGoogle Mapsタイルにアクセスできます。利用規約に関して。

ここに簡単な例があります：最初に追加して使用できます

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

次にマップを作成します。

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

注：this Gist で言及されているフォークもあります。

23
Marius Butuc

Googleでは、独自のAPIを使用せずにタイルを使用することを許可していません。 一般用語 を参照してください。

サービスを誤用しないでください。たとえば、しないでください...提供するインターフェイスと指示以外の方法を使用してアクセスしないでください。

もちろん、何でもpossibleなので、APIなしでタイルを取得することは可能ですが、警告なしにアクセスがブロックされる可能性があります。

お客様が当社の条件またはポリシーに準拠していない場合、または違法行為の疑いがある場合は調査する場合、当社はお客様へのサービスの提供を一時停止または停止することがあります。

とはいえ、Leaflet APIはGoogle APIとは異なりveryに見えないため、APIを使用するように変換すると、検討する価値があります。

14
Andrew Leach

実際にはGoogleマップではありませんが、さまざまなLeafLetマッププロバイダーがあり、サンプルコードが http://leaflet-extras.github.io/leaflet-providers/preview/ にあります。

多分あなたはあなたの特定の問題に適切なプロバイダーをそこで見つけるかもしれません。プラスとして、Andrew Leachが指摘した問題を回避できます。とにかく-私はあなたが知らないことを期待していたわけではありませんが、私はこれを省略したくありません-一部（すべてではない）のマッププロバイダーは商用プロバイダーであるため、サービスの料金を支払う必要があるかもしれないことに注意してくださいまたは他のTOSについて悩むかもしれません。

2
Paul Kertscher

Googleマップをリーフレットに統合してレイヤーとして追加できるようにするサードパーティのプラグインがあります： http://psha.org.ru/b/leaflet-plugins.html 。ただし、元のGoogle Maps API v3のプロキシとして機能するため、シンプルなリーフレットタイルレイヤーほどスムーズに機能せず、残念ながら、利用規約の制限があるため、直接Google Mapsタイルを使用することはできません（回答のように上記）。

2
Mourner

から this ：

これ Debianのプラグイン にはこの問題はありませんが、googleの利用規約には適合しません（ 公式の例 ）。

または、このコードを試してください：

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