22

有没有办法将 Google Maps 与 Leaflet-cloudmade 集成？我的意思是，我不想使用原始的 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的文档（他们没有说太多关于使用第三方地图提供者。他们说他们不知道我们应用程序中使用的地图提供者，所以我认为应该可以使用谷歌地图） .

4

5 回答 5

23

官方的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);

注意：本要点中还提到了一些分叉。

于 2013-02-18T18:42:19.817 回答
14

Google 不允许您在不使用他们自己的 API 获取它们的情况下使用他们的磁贴。请参阅一般条款：

不要滥用我们的服务。例如，不要……尝试使用我们提供的接口和指令以外的方法来访问它们。

当然，一切皆有可能，因此可以在没有 API 的情况下获取磁贴，但您的访问可能会在没有警告的情况下被阻止：

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

也就是说， Leaflet API 看起来与 Google API 没有太大区别，因此转换为使用他们的 API 可能值得考虑。

于 2012-06-17T09:47:56.257 回答
2

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

于 2012-06-22T21:30:41.813 回答
2

它实际上不是谷歌地图，但有各种各样的 LeafLet Map Provider 以及http://leaflet-extras.github.io/leaflet-providers/preview/上提供的示例代码

也许您可能会在那里找到适合您特定问题的提供商。另外，您将避免 Andrew Leach 指出的问题。无论如何 - 并不是我希望你不知道，但我仍然不想忽略这一点 - 请注意，一些（但不是全部）地图提供者是商业提供者，因此你可能需要为服务付费或者可能会打扰其他 TOS。

于 2013-08-30T10:35:10.287 回答
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 回答