如何在leaflet-cloudmade中使用Google Maps API

Question

有没有办法将Google Maps与leaflet-cloudmade集成？ 我的意思是，我不想使用原始的cloudmade地图，而是想要使用Google Maps。 我想显示阿拉斯加地图（那里没有很多道路）。 如果我使用cloudmade地图，它将只是一片白色。

如果我想使用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 地图。

- goFrendiAsgard

Answer 1

官方的 leaflet.js 插件页面 引用了 Plugins by Pavel Shramov 包。
提供的Google.js 可以使用 Google Maps API v3 获取谷歌地图瓦片，但需要遵守其使用条款。

这里是一个快速的示例：您可以通过首先添加以下行来使用它：

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

---

注意：这个 Gist 中还提到了一些分叉。

- Marius Butuc

Answer 2

谷歌不允许在不使用其API的情况下使用其瓦片。请参见通用条款：

  

不要误用我们的服务。例如，不要...尝试使用我们未提供的接口和说明以外的方法访问它们。

当然，任何事情都是可能的，所以可以在没有API的情况下获取瓦片，但您的访问可能会被突然阻止：

  

如果您违反我们的条款或政策，或者我们正在调查可疑行为，我们可能会暂停或停止向您提供我们的服务。

话虽如此，Leaflet API与Google API相比并没有太大区别，因此考虑将其转换为使用谷歌API可能很值得。

- Andrew Leach

---

嗨，我以前不知道这个。谢谢你提供这个信息。 - goFrendiAsgard

Answer 3

实际上这不是Google Maps，但有很多不同的LeafLet地图提供商可用，并且有示例代码在http://leaflet-extras.github.io/leaflet-providers/preview/。也许您可以在那里找到适合您特定问题的提供商。另外，您将避免Andrew Leach指出的问题。无论如何 - 我并不希望您不知道，但我仍然不想忽略 - 请注意，其中一些（但不是全部）地图提供商是商业化的，因此您可能需要支付服务费用或可能会受到其他条款的影响。

- Paul Kertscher

Answer 4

有一个第三方插件可以将Google Maps集成到Leaflet中，以便将其添加为图层：http://psha.org.ru/b/leaflet-plugins.html。但是它充当原始Google Maps API v3的代理，因此它不像简单的Leaflet瓷砖图层那样平滑运行，而且不幸的是，由于使用条款限制（如上面的答案中所述），您不能直接使用Google Maps瓷砖。

- Mourner

Answer 5

来自 this:

这个适用于Debian的插件没有这个问题，但不符合谷歌的服务条款(官方示例)。

或者尝试这段代码：

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

- user3252384