22

Googleマップをleaflet-cloudmadeと統合する方法はありますか？つまり、元のクラウド製の地図は使いたくないのですが、代わりにGoogleマップを使いたいのです。アラスカの地図を表示したい（道路はあまりない）。クラウドメイドの地図を使うと、真っ白になります。

これは、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
});

'http：// {s} .tile.cloudmade.com / YOUR-API-KEY / 997/256 / {z} / {x} /{y}.png'の部分を変更する必要があることはわかっています。しかし、グーグルマップ（または他のマップ）を使用したい場合は、そこに何を書くべきですか？

これはleaflet-cloudmadeのドキュメントです（サードパーティのマッププロバイダーの使用についてはあまり言及していません。アプリケーションで使用されるマッププロバイダーについては不可知論者であるため、Googleマップを使用できるはずです） 。

4

5 に答える 5

23

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

簡単な例を次に示します。最初に追加することで使用できます

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

注：この要点で言及されているフォークもいくつかあります。

于 2013-02-18T18:42:19.817 に答える
14

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

当社のサービスを悪用しないでください。たとえば、私たちが提供するインターフェイスと指示以外の方法を使用してそれらにアクセスしようとしないでください。

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

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

とはいえ、Leaflet API は Google API とあまり変わらないように見えるため、Google API を使用するように変換することを検討する価値があるかもしれません。

于 2012-06-17T09:47:56.257 に答える
2

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

于 2012-06-22T21:30:41.813 に答える
1

これから：_

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 );
于 2014-12-16T08:58:16.107 に答える